Uwielbiam czcionkę Font Awesome i chcę jej używać do większości ikon w mojej witrynie, ale jest kilka niestandardowych ikon SVG, których potrzebowałbym oprócz tego, co jest oferowane.
Zauważyłem, że wersja Font Awesome .svg składa się głównie z następujących <glyph />
elementów:
...
<glyph unicode="" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...
Czy byłoby efektywne pobranie kodu ikony svg, wklejenie go jako nowego elementu glifu i przypisanie nieużywanego znaku Unicode?
svg
webfonts
font-awesome
Christian Schlensker
źródło
źródło
Odpowiedzi:
Wypróbuj Icomoon . Możesz przesłać własne pliki SVG, dodać je do biblioteki, a następnie utworzyć niestandardową czcionkę łączącą FontAwesome z własnymi ikonami.
źródło
Możesz dać fontcustom szansę, tworzy własną czcionkę z plików svg.
źródło
W Font Awesome 5 możesz tworzyć niestandardowe ikony z własnymi danymi SVG. Oto demo repozytorium GitHub , z którym możesz grać. A oto CodePen, który pokazuje, jak coś podobnego można zrobić w
<script>
blokach.W obu przypadkach wystarczy użyć
library.add()
do dodania takiego obiektu:Zauważ, że element oznaczony komentarzem „svg path data” w przykładowym kodzie jest tym, co zostanie przypisane jako wartość
d
atrybutu w<path>
elemencie, który jest elementem podrzędnym<svg>
. W ten sposób (pomijając niektóre szczegóły dla jasności):(Na podstawie mojej podobnej odpowiedzi tutaj: https://stackoverflow.com/a/50338775/4642871 )
źródło
fab
,fas
,far
,fal
) będziesz na większe ryzyko wystąpienia konfliktu nazw, jeśli nie teraz, to być może w przyszłości będziemy kontynuować dodawanie ikony z tych standardowych prefiksów. Użycie niestandardowego przedrostka nie zmniejszy prawdopodobieństwa, że plik SVG „zmieści się w witrynie” - ale nie jestem pewien, co masz na myśli przez to wyrażenie, więc może mógłbyś to wyjaśnić?Sugeruję oddzielenie ikon od FontAwesome oraz tworzenie i utrzymywanie własnej biblioteki niestandardowej. Osobiście uważam, że utrzymywanie FontAwesome osobno jest znacznie łatwiejsze, jeśli zamierzasz tworzyć własną bibliotekę ikon. Następnie możesz załadować FontAwesome do swojej witryny z CDN i nigdy nie martwić się o jej aktualność.
Tworząc własne ikony niestandardowe, utwórz każdą ikonę za pomocą programu Adobe Illustrator lub podobnego oprogramowania. Po utworzeniu ikon zapisz je osobno w
SVG
formacie na swoim komputerze.Następnie przejdź do IcoMoon : http://icomoon.io , który ma najlepsze oprogramowanie do generowania czcionek (moim zdaniem) i jest darmowy. IcoMoon pozwoli na import pojedynczych czcionek SVG zapisany do biblioteki czcionek, a następnie wygenerować niestandardowe ikony glifów bibliotekę w
eot
,ttf
,woff
, isvg
. Jeden format, którego IcoMoon nie generuje, towoff2
.Po wygenerowaniu pakietu ikon w IcoMoon przejdź do FontSquirrel : http://fontsquirrel.com i użyj ich generatora czcionek. Użyj
ttf
pliku wygenerowanego w IcoMoon . W nowo utworzonym pakiecie ikon będziesz mieć teraz swój pakiet ikon wwoff2
formacie.Upewnij się, że pliki
eot
,ttf
,svg
,woff
, iwoff2
są takie same nazwy. Generujesz pakiet ikon z dwóch różnych witryn internetowych / oprogramowania, a one inaczej nazywają wygenerowane dane wyjściowe.Będziesz mieć wygenerowany CSS dla swojego pakietu ikon w obu lokalizacjach. Ale CSS wygenerowany w IcoMoon nie będzie zawierał
woff2
formatu w Twojej@font-face {}
deklaracji. Pamiętaj, aby dodać, że podczas dodawania CSS do projektu:Pamiętaj, że możesz uzyskać wartości Unicode glifów dla każdej ikony w pakiecie ikon za pomocą oprogramowania IcoMoon . Te wartości mogą być pomocne w przypisywaniu ikon przez CSS, jak w (zakładając, że używamy
font-family
zadeklarowanej w@font-face {...}
powyższym przykładzie ):Wartość Unicode glifu można również uzyskać
e953
, otwierającsvg
plik wygenerowany przez pakiet czcionek w edytorze tekstu. Na przykład:źródło
font-family: customiconpack;
swójselector:after
? Pozwól mi teraz zaktualizować moje rozwiązanie dlaselector:after
przykładu kodu.Zależy od tego, co masz. Jeśli ikona svg jest tylko ścieżką, łatwo jest dodać ten glif, po prostu kopiując atrybut „d” do nowego elementu <glyph>. Jednak ścieżka musi być przeskalowana do układu współrzędnych czcionki (EM-kwadrat, który zazwyczaj wynosi [0,0,2048,2048] - standard dla czcionek Truetype) i wyrównana z wybraną linią bazową.
Jednak nie wszystkie przeglądarki obsługują czcionki svg, więc będziesz musiał przekonwertować go również na inne formaty, jeśli chcesz, aby działał wszędzie.
Fontforge może importować pliki svg (wybierz miejsce na glify , Plik> Importuj, a następnie wybierz obraz svg), a następnie możesz przekonwertować na wszystkie odpowiednie formaty czcionek (svg, truetype, woff itp.).
źródło
Podobne podejście do @ Samuel-bergström:
Wiem, że komentowanie innych typów plików może być „kontrowersyjne”, ale z przyjemnością słyszę, jak generować pliki .eot lub .otf w komentarzach.
i na koniec, jak wspomina Samuel, zaktualizuj swój CSS / LESS o:
.fa-XXX: przed {content: "\ f501"; }
źródło
Zbadałem trochę nad czcionkami internetowymi SVG i tworzeniem czcionek. Moim zdaniem, jeśli chcesz „dodać” czcionki do już istniejącej czcionki, musisz wykonać następujące czynności:
przejdź do inkscape i utwórz glif, zapisz go jako SVG, abyś mógł odczytać kod, upewnij się, że przypisałeś mu znak Unicode, który nie jest obecnie używany, więc nie będzie kolidował z żadnym z istniejących glifów w czcionce. może to być trudne, więc myślę, że lepszym prostszym sposobem byłoby zastąpienie istniejącego glifu własnym (po prostu wybierz ten, którego nie używasz, skopiuj pierwszą część:
Zapisz svg, a następnie przekonwertuj go na czcionkę internetową za pomocą dowolnego konwertera online, aby czcionka internetowa działała we wszystkich przeglądarkach.
gdy to zrobisz, powinieneś mieć plik SVG z jednym z glifów zastąpiony. W takim przypadku jesteś gotowy. jeśli nie, musisz utworzyć CSS dla swojego nowego glifu, w tym przypadku spróbuj ponownie użyć istniejącego CSS FA i dodaj tylko
źródło
Jeśli chcesz jakieś ikony (lub wszystkie) z niesamowitej czcionki, w tym niestandardowe ikony svg, możesz:
1- Przejdź do http://fontawesome.io/ Pobierz plik zip i rozpakuj go, na przykład na swoim pulpicie.
2- Idź do http://fontastic.me/ użyj swojego adresu e-mail, aby utworzyć konto.
3- Po zalogowaniu kliknij opcję nagłówka: Dodaj więcej ikon.
4- Wybierz plik SVG niesamowitej czcionki znajdujący się w wyodrębnionym pliku zip wewnątrz czcionek.
5- Powtórz proces przesyłania własnych plików svg.
6- Wewnątrz strony głównej (w nagłówku strony) Wybierz ikony, które chcesz pobrać, dostosuj je, aby nadać im własne nazwy i wybierz opcję publikowania, aby uzyskać łącze, lub pobierz czcionki i css.
Przepraszam, za mój angielski ! :RE
źródło