Extraire SVG de Font Awesome

89

Je veux obtenir les données de chemin SVG à partir des glyphes Font Awesome afin de pouvoir les utiliser directement comme SVG dans mon HTML. Je pensais que ce serait aussi simple que de copier-coller les données de chemin de fontawesome-webfont.svg , mais lorsque je l'utilise dans mon HTML, les symboles sont tous rendus à l'envers. Quelqu'un sait pourquoi?

(Voir Fiddle )

Police génial SVG:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... Porté au format HTML SVG (et réduit):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

html svg font-awesome

— Yarin
source

62

Le tout selon la spécification SVG ...

Contrairement aux graphiques standard en SVG, où le système de coordonnées initial a l'axe y pointant vers le bas, la grille de conception pour les polices SVG, ainsi que le système de coordonnées initial pour les glyphes, a l'axe y pointant vers le haut pour assurer la cohérence avec les pratiques industrielles acceptées de nombreux formats de polices populaires.

Selon ce commentaire , changer le wrapper en <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>semble faire l'affaire, où 1792 est l'unité par em et 1536 est l'ascension sur l'élément font-face

— Robert Longson
source

6

Pour l' intégralité de cette réponse, en changeant l'emballage à <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>semble faire l'affaire, où 1792est units-per-emet 1536est ascentsur l' font-faceélément.

— mckamey

Re 1792 is the units-per-em: Typo? Je pense que ce serait 179.2pour correspondre à la hauteur / largeur.

— Nate Cook

99

Il suffit de récupérer les icônes svg prêtes à partir de ce dépôt github.Elles
sont déjà retournées et centrées au besoin

entrez la description de l'image ici

Appuyez sur n'importe quel fichier, puis sur "Raw" entrez la description de l'image ici

— Angie
source

10

J'ai trouvé que beaucoup d'entre eux avaient des icônes recadrées sur les côtés, par exemple une voiture

— Bankzilla

21

L'application IcoMoon rend cela très simple.

— jedierikb
source

2

Yea IcoMoon est génial

— Yarin

3

IcoMoon est très facile à utiliser, mais j'ai constaté qu'il exportait des chemins plus longs que les SVG de ce dépôt GitHub . Essayez de comparer l'icône fa-gift. Il paths'agit de 837 caractères via IcoMoon, contre 514 dans le repo .

— Dan Dascalescu

Belle trouvaille Dan, n'avait aucune idée de cette mise en garde. Pourtant, j'adore IcoMoon.

— SISYN

13

Utilisez le script fontforge. Il y a un script que j'ai trouvé en ligne ici :

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf

Voir: http://fontforge.sourceforge.net/scripting.html

— jedierikb
source

7

Il existe également un outil node.js qui automatisera cela pour vous et créera un avant et après verify.html. https://github.com/eugene1g/font-blast

Je l'ai utilisé sur d'autres polices, seulement 1 mauvaise conversion d'icône jusqu'à présent, mais le reste dans la police SVG était bien.

— tomByrer
source

2

Je vais devoir essayer ça

— John Dangerous

font-blast super rapide et facile

— 00-BBB

4

Vous pouvez simplement télécharger la dernière version d' faici: https://fontawesome.com/

Et puis allez dans le advanced-options/raw-svgdossier. Vous y trouverez trois dossiers brands, regularet solidcontenant toutes les dernières icônes disponibles.

— Orlandster
source

3

Vous pouvez les télécharger sur flaticon.com ici:

http://www.flaticon.com/packs/font-awesome

— John Dangerous
source

Cela peut être utile, mais lorsque vous souhaitez redimensionner un chemin de 512x512 à 20x20, cela nécessite beaucoup de réduction des boutons

— nicolallias

3

Vous pouvez simplement télécharger n'importe quel svg Font-Awesome dont vous avez besoin à partir de leur dépôt sur Github

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

— muah
source