Ottimizza Font Awesome solo per le classi utilizzate

Sto usando il file Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass per renderlo _font-awesome.sass così posso @importnel mio progetto Sass. Sto anche usando http://middlemanapp.com/ per convertire Sass in Css . Domande:

1. C'è un modo per portare solo le classi di icone usate nel mio .css convertito? Perché al momento conteneva tutte le classi da _font-awesome.sass

2. BONUS: È possibile ricompilare i caratteri in qualche modo con le classi di icone utilizzate per renderli più piccoli durante l'uso in produzione?

Se riesco a ottenere alcuni suggerimenti sul n. 1 sopra, sarebbe abbastanza fantastico.

Grazie.

Sass non ha idea di quali classi stai effettivamente utilizzando. Questo è qualcosa che dovrai tagliare manualmente da solo. Apri il file .scss fornito e elimina tutto ciò che non ti serve.

La modifica del file del carattere stesso per eliminare i glifi non necessari richiede un'applicazione di terze parti e va oltre lo scopo di questa domanda.

Fontello è un servizio web online che può fare tutto questo per te. Ti consente di mescolare e abbinare più raccolte di caratteri di icone per creare il file di caratteri perfetto per il tuo progetto. Oltre al file di font personalizzato, fornisce più file .css contenenti stili già generati per te (cambiare l'estensione in .scss ti permetterà di importarli nel tuo progetto Sass esistente).

fontello è molto buono ma IcoMoon è ancora più fantastico.

Ora puoi creare un sottoinsieme di icone da Font-awesome per l'uso in produzione. Ora è disponibile uno strumento di sottoinserimento ufficiale chiamato icnfnt , che ti consente di scegliere e impacchettare solo le icone necessarie dalla versione corrente di Font-awesome (v3.0.2).

Il download personalizzato include anche tutto il codice CSS, LESS, SCSS e SASS!

Io uso LESS e non SASS, quindi potresti dover adattare la tua implementazione.

Ambiente:

• Font awesome 4.5.0 (versione attuale)
• Ubuntu 14.04 LTS
• bash

Usalo per generare l'elenco dei numeri di caratteri Unicode di cui hai bisogno:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

Quindi lo usi con FontSquirrel nella modalità esperto in cui selezioni sottoinsiemi personalizzati: http://www.fontsquirrel.com/tools/webfont-generator

Negli intervalli Unicode, inserisci i valori separati da virgola dall'alto.

Quindi, per rimuovere le cose non necessarie dal CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

Dovrai aprire less/font-awesome/icons.lesse incollare l'output da grep nel file.

Bene, il sass può certamente essere spostato un po 'per rendere i selettori %basati in modo che siano solo estensibili. Una volta fatto questo, le classi possono essere create per abbinare le icone desiderate, e poi possono @extendle classi fantastiche.

Personalmente, lo faccio e in realtà non uso le classi nel markup, ma uso solo i selettori per gli elementi rilevanti e @extendloro con queste classi.

Esempio:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

Quindi nel tuo scss

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voilà.

Fontastic ha funzionato per me (era elencato nella pagina GitHub di Font Awesome ). Seleziona i glifi di cui hai bisogno e scaricali come nuovo carattere personalizzato. Ottimo strumento.

Iconmoon ha funzionato per me. L'ho usato importando il file svg da font-awesome assicurandomi così di ottenere le icone che desidero e non solo quelle disponibili sul loro sito. Anche questo link mi ha aiutato con l'integrazione delle nuove icone https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/