Extraire SVG de Font Awesome

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>

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

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

Appuyez sur n'importe quel fichier, puis sur "Raw"

L'application IcoMoon rend cela très simple.

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

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.

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.

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

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

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