Ottimizza carattere Impressionante solo per le classi utilizzate

Question

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

1. C'è un modo per portare solo classi delle icone usate nel mio css convertito? Perché in questo momento ha effettuato tutte le classi da _font-awesome.sass

2. BONUS: E 'possibile ricompilazione i font in qualche modo con classi delle icone usate per renderlo più piccolo in uso in produzione?

Se riesco a ottenere alcuni suggerimenti su # 1 sopra, sarebbe abbastanza impressionante.

Grazie.

Answer 1

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

La modifica del file del carattere stesso per eliminare glifi non necessari richiede un'applicazione di terzi e non rientra nell'ambito di questa domanda.

---

Fontello è un servizio web online che può fare tutto questo per voi. Ti consente di combinare più raccolte di font di icone per creare il file di font perfetto per il tuo progetto. Oltre al file di font personalizzato, fornisce più file .css contenenti stili già generati per te (la modifica dell'estensione in .scss ti consentirà di importarli nel tuo progetto Sass esistente).

Answer 2

Ora è possibile impostare sottoinsieme le icone da Font-awesome per l'utilizzo in produzione. È ora disponibile uno strumento di sottotitolo ufficiale denominato icnfnt, che consente di selezionare e raggruppare solo le icone necessarie dalla versione corrente di Font-awesome (v3.0.2).

Il download personalizzato include anche tutti i codici CSS, LESS, SCSS e SASS!

Answer 3

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

Answer 4

Bene, il sass può certamente essere un po 'oscillante per rendere i selettori % basati in modo che siano solo estensibili. Una volta eseguita questa operazione, è possibile creare classi per abbinare le icone desiderate e quindi è possibile utilizzare le classi di font fantastici @extend.

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

Esempio:

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

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

Poi, nel tuo SCSS

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

Et voilà.

Answer 5

Io uso MENO e non SASS quindi potrebbe essere necessario adattare l'implementazione.

Ambiente:

carattere impressionante 4.5.0 (versione attuale)

Ubuntu 14.04 LTS

bash

Utilizzare questo per generare la lista dei numeri di caratteri Unicode che è necessario: 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

Si utilizza quindi con FontSquirrel in modalità esperto in cui si seleziona il subset personalizzato: http://www.fontsquirrel.com/tools/webfont-generator

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

Quindi per rimuovere elementi non necessari dal CSS: egrep "@ fa-var - ($ fa_icons);" less/font-awesome/icons.less

Avrai bisogno di aprire less/font-awesome/icons.less e incollare l'output da grep nel file.

Buona fortuna, Martin

Answer 6

Fontastic ha funzionato per me (è stata quotata Font Awesome github page). Seleziona i glifi di cui hai bisogno e scaricalo come nuovo carattere personalizzato. Strumento eccellente

Answer 7

<script> 
     // Asynchronously load non-critical css 
     function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function() { i.media = n || "all" }) } 
     // load css file async 
     loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
    </script>