Extraire SVG de Font Awesome

Je veux obtenir les données du chemin SVG à partir des glyphes de Font Awesome afin que je puisse les utiliser directement en tant que 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 quand je les utilise dans mon code HTML, les symboles sont tous rendus à l’envers. Quelqu’un sait pourquoi?

(Voir violon )

Police SVG génial:

 

… Porté en HTML SVG (et réduit):

  

Tout selon la spécification SVG …

Contrairement aux graphiques standard en SVG, avec l’axe des ordonnées du système de coordonnées initial orienté vers le bas, la grid de conception des fonts SVG et le système de coordonnées initial des glyphes ont l’axe des ordonnées vers le haut. de nombreux formats de fonts populaires.

Selon ce commentaire , Changer le wrapper en semble faire l’affaire, où 1792 est l’unité-per-em et 1536 est l’ascension de l’élément font-face

Il suffit de récupérer les icons svg prêtes de ce repository github
Ils sont déjà retournés et centrés au besoin

entrer la description de l'image ici

Appuyez sur n’importe quel fichier, puis sur “Raw” entrer la description de l'image ici

L’application IcoMoon rend cette mort 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

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

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

Il y a aussi un outil node.js qui automatisera ceci pour vous, et créera un verify.html avant et après. https://github.com/eugene1g/font-blast

Je l’ai utilisé sur d’autres fonts, seulement 1 mauvaise conversion d’icône jusqu’ici, mais rest dans la police SVG était bien.

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

Et puis allez dans le dossier advanced-options/raw-svg . Vous y trouverez trois brands dossiers, regular et solid contenant toutes les dernières icons disponibles.