Chcę uzyskać dane ścieżki SVG z glifów Font Awesome, aby móc ich używać bezpośrednio jako SVG w moim HTML. Pomyślałem, że będzie to tak proste, jak skopiowanie i wklejenie danych ścieżki z fontawesome-webfont.svg , ale kiedy używam go w moim HTML, wszystkie symbole są renderowane do góry nogami. Czy ktoś wie, dlaczego?
(Zobacz Fiddle )
Font Awesome SVG:
<glyph unicode="" 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" />
... Przeniesiony do HTML SVG (i zmniejszony):
<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>
źródło
<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>
wydaje się załatwiać sprawę, gdzie1792
jestunits-per-em
i1536
jest elementemascent
włączonymfont-face
.1792 is the units-per-em
: Literówka? Myślę, że179.2
pasowałoby to do wysokości / szerokości.Po prostu pobierz gotowe ikony svg z tego repozytorium github.
Są już odwrócone i wyśrodkowane w razie potrzeby
Naciśnij dowolny plik, a następnie „Raw”
źródło
Aplikacja IcoMoon sprawia, że jest to proste.
źródło
path
to 837 znaków przez IcoMoon, w porównaniu z 514 w repozytorium .Użyj skryptu fontforge. Tutaj jest skrypt, który znalazłem online :
fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf
Zobacz: http://fontforge.sourceforge.net/scripting.html
źródło
Istnieje również narzędzie node.js, które zautomatyzuje to za Ciebie i utworzy przed i po
verify.html
. https://github.com/eugene1g/font-blastUżyłem go na innych czcionkach, jak dotąd tylko 1 zła konwersja ikon, ale reszta w czcionce SVG była w porządku.
źródło
Możesz po prostu pobrać najnowszą wersję
fa
tutaj: https://fontawesome.com/A następnie przejdź do
advanced-options/raw-svg
folderu. Nie znajdziesz trzy folderybrands
,regular
asolid
zawierający wszystkie najnowsze ikony dostępne.źródło
Możesz je pobrać ze strony flaticon.com tutaj:
http://www.flaticon.com/packs/font-awesome
źródło
Możesz po prostu pobrać dowolny plik Font-Awesome svg, którego potrzebujesz, z ich repozytorium na Github
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
źródło