Dodaj niestandardowe ikony do niesamowitej czcionki

138

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="&#xf0b2;" 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="&#xf0c0;" 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="&#xf0c1;" 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?

Christian Schlensker
źródło
2
znalazłeś rozwiązanie? czy po prostu wybrałeś inną wtyczkę?
Michel Ayres
1
Nie znaleziono linku do „.svg version of Font Awesome”. Proszę zaktualizować.
Yannis Dran

Odpowiedzi:

125

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.

davidtheclark
źródło
Dzięki :) To bardzo pomaga!
Johnny Zhao
Świetna obsługa. Dziękuję za to. Wygenerowano niestandardowy zestaw ikon z plików SVG w mgnieniu oka.
Nodoze
Dobre narzędzie. Idealnie. :)
Christian Mark
2
Cześć, wygenerowałem ikony czcionek z folderem zawierającym ikony svg. Ale później chcę dodać do tego jedną ikonę, czy można to dodać? czy znowu muszę wygenerować z folderem ?.
Varadha31590
34

Możesz dać fontcustom szansę, tworzy własną czcionkę z plików svg.

Dolina górska
źródło
8
Nazwa domeny wygasła 2 października 15
Aerious
6
Oto projekt github do czasu rozwiązania problemu z domeną .
Glen
21

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:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

Zauważ, że element oznaczony komentarzem „svg path data” w przykładowym kodzie jest tym, co zostanie przypisane jako wartość datrybutu w <path>elemencie, który jest elementem podrzędnym <svg>. W ten sposób (pomijając niektóre szczegóły dla jasności):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(Na podstawie mojej podobnej odpowiedzi tutaj: https://stackoverflow.com/a/50338775/4642871 )

mwilkerson
źródło
A co, jeśli chcemy użyć standardowych przedrostków, aby nowy plik svg zmieścił się na stronie?
Norbert Kardos,
1
Możesz użyć dowolnego prefiksu, który Ci się podoba. Ale jeśli używasz standardowego prefiksu ( 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ć?
mwilkerson
Potrzebujemy określonej ikony marki społecznościowej (ponad 200 milionów użytkowników), o którą już poproszono. Chcielibyśmy dodać tę ikonę svg do wersji pro, aby używać jej na stronie internetowej, bez robienia wyjątków html / css / else. Wszystkie inne marki mają już ikony, więc klasa fab jest obecna na elementach (a aktualnie wybrana marka jest dodawana do css)
Norbert Kardos
1
Tak, będzie działać dobrze, aby użyć standardowego prefiksu do dodania niestandardowej ikony. Pamiętaj tylko, że jeśli nazwa ikony będzie taka sama, jak coś, co później dodamy do tego przedrostka, nastąpi konflikt. Może więc wybierz nazwę ikony, która raczej nie będzie kolidować? Rozwidlony CodePen do zademonstrowania: codepen.io/fontawesome/pen/pZWXYX
mwilkerson
Mój plik SVG pochodzi z pliku Adobe AI i ma wiele ścieżek. To uniemożliwiło mi prawidłowe ustawienie parametru „d” określonego powyżej. Musiałem najpierw przekonwertować plik AI na ścieżkę złożoną przed wyeksportowaniem go jako SVG. Nauczyłem się, jak to zrobić tutaj: graphicdesign.stackexchange.com/questions/35054/…
Alex Standiford
19

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 SVGformacie 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, i svg. Jeden format, którego IcoMoon nie generuje, to woff2.

Po wygenerowaniu pakietu ikon w IcoMoon przejdź do FontSquirrel : http://fontsquirrel.com i użyj ich generatora czcionek. Użyj ttfpliku wygenerowanego w IcoMoon . W nowo utworzonym pakiecie ikon będziesz mieć teraz swój pakiet ikon w woff2formacie.

Upewnij się, że pliki eot, ttf, svg, woff, i woff2są 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ł woff2formatu w Twojej @font-face {}deklaracji. Pamiętaj, aby dodać, że podczas dodawania CSS do projektu:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

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-familyzadeklarowanej w @font-face {...}powyższym przykładzie ):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

Wartość Unicode glifu można również uzyskać e953, otwierając svgplik wygenerowany przez pakiet czcionek w edytorze tekstu. Na przykład:

<glyph unicode="&#xe953;" glyph-name="eye" ... />
Pegues
źródło
nie działa ,.,.
zakończ
1
Czy możesz wyjaśnić trochę więcej? Chętnie pomogę Ci rozwiązać Twój problem. Czy określiłeś font-family: customiconpack;swój selector:after? Pozwól mi teraz zaktualizować moje rozwiązanie dla selector:afterprzykładu kodu.
Pegues,
przesłałem plik svg mojej ikony,. ściągnąłem plik,., umieściłem je w projekcie dodaj nowy plik css do projektu skopiowałem twój kod do pliku zmieniłem kod za pomocą mojego kodu ikony,. nie działa,.
Inzmam ul Hassan
1
Dołącz do tego pokoju czatu, który utworzyłem, abyśmy mogli łatwiej omówić problem: chat.stackoverflow.com/rooms/132402/ ...
Pegues
2
Komentuję tutaj, aby inni wiedzieli, że problem polegał na tym, że utworzyłeś swój SVG w programie Illustrator z zaimportowanego pliku PNG. Musisz odtworzyć swoją ikonę jako wektor. PNG jest formatem rastrowym i nie zawiera krzywych wektorowych.
Pegues
18

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.).

Erik Dahlström
źródło
13

Podobne podejście do @ Samuel-bergström:

  • Pobierz Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
  • Pobierz FontForge http://fontforge.github.io/en-US/downloads/
  • Pobierz Inkscape
  • Otwórz Inskscape i utwórz kształt jednej warstwy jako nową ikonę czcionki
  • Zapisz plik SVG, zamknij Inkscape
  • Otwórz FontForge (jeśli masz wiele monitorów, użyj Windows-LeftArrow, aby zmienić położenie, ponieważ mają dziwne okna Java SWING, które wyłączają się z monitora i mają modalne problemy z wyskakującymi okienkami - musiałem sprawdzić pasek zadań dla niektórych)
  • Plik | Otwórz plik fontawesome-webfont.svg
  • Plik | Import
  • Przewiń w dół, kliknij prawym przyciskiem myszy ikonę | Informacje o glifach
  • Zaktualizuj nazwę glifu do uniFXXX (XXX to coś w rodzaju 501, wyższa liczba niż najwyższy kod Unicode używany w wersji 4.5 FontAwesome)
  • Unicode Vlaue U + fXXX
  • Kliknij OK
  • Plik | Zapisać
  • Plik | Generuj czcionki ...
  • Zamknij FontForge
  • Otwórz swój projekt internetowy
  • Skopiuj pliki czcionek do folderu (w moim projekcie) „\ Content \ fonts \”.
  • Edytuj „\ Content \ styles \ fa \ path.less”, tak aby wyglądał następująco:

@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

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"; }

OzBob
źródło
3

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

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}
Samuel Bergström
źródło
2

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

CarLoOSX
źródło
To zadziała, ale myślę, że lepiej jest stworzyć własną bibliotekę ikon i używać fontawesome side. Pozwoli to na zaktualizowanie fontawesome (o nowe ikony).
Guillaume Harari