Extraction de SVG à partir de Font Awesome

Question

Je veux obtenir les données du chemin SVG à partir de Font Awesome afin que je puisse les utiliser directement en tant que SVG dans mon HTML. Je pensais que ce serait aussi facile que de copier-coller les données de chemin d'accès de fontawesome-webfont.svg mais lorsque je l'utilise dans mon code HTML, les symboles sont tous affichés à l'envers. Quelqu'un sait-il pourquoi ?

(Voir Violon )

Font Awesome 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é en 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>

Answer 1

Il existe également un outil node.js qui automatisera cette opération pour vous et créera une image 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.

Answer 2

Vous pouvez simplement télécharger la dernière version de fa ici : https://fontawesome.com/

Et ensuite aller à la advanced-options/raw-svg dossier. Vous y trouverez trois dossiers brands , regular y solid contenant toutes les dernières icônes disponibles.

Answer 3

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

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