Aggiungi icone personalizzate al carattere fantastico

Adoro il carattere icona Font Awesome e voglio usarlo per la maggior parte delle icone sul mio sito, ma ci sono alcune icone svg personalizzate di cui avrei bisogno oltre a ciò che viene offerto.

Ho notato che la versione .svg di Font Awesome è composta principalmente da questi <glyph />elementi:

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

Sarebbe efficace prendere il mio codice icona svg, incollarlo come nuovo elemento glifo e assegnare un carattere unicode inutilizzato?

Dare Icomoon una prova. Puoi caricare i tuoi SVG personali, aggiungerli alla libreria, quindi creare un carattere personalizzato che combina FontAwesome con le tue icone.

Puoi provare fontcustom , crea il tuo font da file svg.

In Font Awesome 5, puoi creare icone personalizzate con i tuoi dati SVG. Ecco un repository GitHub demo con cui puoi giocare. Ed ecco una CodePen che mostra come qualcosa di simile potrebbe essere fatto in <script>blocchi.

In entrambi i casi, implica semplicemente l'utilizzo library.add()per aggiungere un oggetto come questo:

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

Si noti che l'elemento etichettato dal commento "svg path data" nell'esempio di codice è ciò che verrà assegnato come valore ddell'attributo su un <path>elemento figlio di <svg>. In questo modo (tralasciando alcuni dettagli per chiarezza):

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

(Adattato dalla mia risposta simile qui: https://stackoverflow.com/a/50338775/4642871 )

Ti suggerisco di mantenere le tue icone separate da FontAwesome e creare e gestire la tua libreria personalizzata. Personalmente, penso che sia molto più facile mantenere separato FontAwesome se stai per creare la tua libreria di icone. Puoi quindi caricare FontAwesome nel tuo sito da un CDN e non dovrai mai preoccuparti di mantenerlo aggiornato.

Quando crei le tue icone personalizzate, crea ogni icona tramite Adobe Illustrator o software simile. Una volta create le icone, salvale singolarmente in SVGformato sul tuo computer.

Successivamente, vai su IcoMoon : http://icomoon.io , che ha il miglior software per la generazione di font (secondo me), ed è gratuito. IcoMoon vi permetterà di importare i singoli font SVG-salvato in una libreria di font, quindi generare la libreria glifo icona personalizzata in eot, ttf, woff, e svg. Un formato che IcoMoon non genera è woff2.

Dopo aver generato il tuo icon pack su IcoMoon , vai su FontSquirrel : http://fontsquirrel.com e usa il loro generatore di font. Usa il tuo ttffile generato su IcoMoon . Nel pacchetto di icone appena creato, ora avrai il tuo pacchetto di icone in woff2formato.

Assicurarsi che i file per eot, ttf, svg, woff, e woff2sono tutti lo stesso nome. Stai generando un pacchetto di icone da due diversi siti Web / software e denominano l'output generato in modo diverso.

Avrai CSS generato per il tuo icon pack in entrambe le posizioni. Ma i CSS generati su IcoMoon non includeranno il woff2formato nella tua @font-face {}dichiarazione. Assicurati di aggiungerlo quando aggiungi il tuo CSS al tuo progetto:

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

Tieni presente che puoi ottenere i valori unicodici glifi di ciascuna icona nel tuo pacchetto di icone utilizzando il software IcoMoon . Questi valori possono essere utili nell'assegnare le tue icone tramite CSS, come in (supponendo che stiamo usando il font-familydichiarato nell'esempio @font-face {...}sopra):

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

È inoltre possibile ottenere il valore glifo Unicode e953se si apre il svgfile generato dal pacchetto di caratteri in un editor di testo. Per esempio:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

Dipende da quello che hai. Se la tua icona svg è solo un percorso, è abbastanza facile aggiungere quel glifo semplicemente copiando l'attributo 'd' in un nuovo elemento <glyph>. Tuttavia, il percorso deve essere ridimensionato in base al sistema di coordinate del carattere (il quadrato EM, che in genere è [0,0,2048,2048] - lo standard per i caratteri TrueType) e allineato con la linea di base desiderata.

Tuttavia, non tutti i browser supportano i caratteri svg, quindi dovrai convertirlo anche in altri formati se vuoi che funzioni ovunque.

Fontforge può importare file svg (selezionare uno slot glifo, File> Importa e quindi selezionare l'immagine svg), quindi è possibile convertire in tutti i formati di carattere pertinenti (svg, TrueType, woff ecc.).

Approccio simile a @ Samuel-bergström:

• Scarica Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• Scarica FontForge http://fontforge.github.io/en-US/downloads/
• Scarica Inkscape
• Apri Inskscape e crea una forma a livello singolo come nuova icona del carattere
• Salva file SVG, Chiudi Inkscape
• Apri FontForge (Se hai più monitor, usa Windows-LeftArrow, per riposizionare in quanto hanno strane finestre Java SWING che si spengono dal monitor e hanno problemi modali con i popup - Ho dovuto controllare la mia barra delle attività per alcuni)
• File | Apri fontawesome-webfont.svg
• File | Importare
• Scorri verso il basso, fai clic con il tasto destro sull'icona | Informazioni suglifi
• Aggiorna il nome glifo su uniFXXX (XXX è qualcosa come 501, un numero più alto del più alto Unicode usato nella v4.5 di FontAwesome)
• Unicode Vlaue U + fXXX
• Clicca OK
• File | Salva
• File | Genera font ...
• Chiudi FontForge
• Apri il tuo progetto web
• Copia i file dei font nella cartella "\ Content \ fonts \" (nel mio progetto).
• Modifica "\ Content \ styles \ fa \ path.less" in modo che sia simile a:

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

So che potrebbe essere "controverso" commentare altri tipi di file, ma felice di sentire come generare file .eot o .otf nei commenti.

• e infine, come menziona Samuel, aggiorna il tuo CSS / MENO con:

  .fa-XXX: prima di {content: "\ f501"; }

Ho studiato un po 'i font web SVG e la creazione di font, ai miei occhi se vuoi "aggiungere" font a font già fantastici di font, devi fare quanto segue:

vai in inkscape e crea un glifo, salvalo come SVG in modo da poter leggere il codice, assicurati di assegnargli un carattere unicode che non è attualmente utilizzato in modo che non sia in conflitto con nessuno dei glifi esistenti nel font. questo potrebbe essere difficile, quindi penso che un'approvazione più semplice sarebbe la sostituzione di un glifo esistente con il tuo (basta sceglierne uno che non si utilizza, copiare la prima parte:

Salvare lo svg quindi convertirlo in carattere web usando qualsiasi convertitore online in modo che il tuo webfont funzioni in tutti i browser.

una volta fatto, dovresti avere un SVG con uno dei glifi sostituito nel qual caso sei fatto. in caso contrario devi creare il CSS per il tuo nuovo glifo, in questo caso prova a riutilizzare i CSS esistenti di FA e aggiungi solo

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

Se vuoi alcune icone (o tutte) da font-awesome tra cui le tue icone svg personalizzate puoi:

1- Vai su http://fontawesome.io/ Scarica lo zip ed estrailo, ad esempio sul tuo desktop.

2- Vai su http://fontastic.me/ usa la tua email per creare un account.

3- Dopo aver effettuato l'accesso, fare clic sull'opzione dell'intestazione: Aggiungi altre icone.

4- Seleziona l'SVG di font-awesome situato nella zip estratta all'interno dei font.

5- Ripeti i processi caricando i tuoi file svg.

6- Inside Home (nell'intestazione della pagina) Seleziona le icone che vuoi scaricare, personalizzale per dare i tuoi nomi personalizzati e seleziona pubblica per avere un link o scarica i font e i CSS.

Mi dispiace per il mio inglese! : D