Dodaj niestandardowe ikony do niesamowitej czcionki

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?

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.

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

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 )

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" ... />

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

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

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

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