Caratteri icona: come funzionano?

Capisco che i caratteri delle icone sono solo caratteri e che puoi ottenere le icone semplicemente chiamando il loro nome di classe, ma come funzionano i caratteri delle icone?

Ho provato a controllare le risorse dei caratteri delle icone correlate caricate in Chrome per vedere come i caratteri delle icone visualizzano le icone (rispetto ai caratteri generali) ma non sono stato in grado di capire come ciò avvenga.

Inoltre, non sono riuscito a trovare risorse su come viene eseguita questa "tecnica dei caratteri delle icone", anche se sono disponibili molti caratteri delle icone . Ci sono anche un sacco di risorse che mostrano come integrare i caratteri delle icone , ma nessuno sembra condividere o scrivere su come farlo!

I glifici sono immagini e non un carattere. Tutte le icone si trovano all'interno di un'immagine sprite (disponibile anche come immagini singole) e vengono aggiunte agli elementi come posizionate backround-image:

Actual icone di font ( FontAwesome , per esempio) non comporta il download di un font specifico e fare uso della contentproprietà, per esempio:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Poiché la contentproprietà non è supportata nei browser meno recenti, anche questi fanno uso di immagini .

Ecco un esempio di FontAwesome completamente grezzo in uso come carattere, trasformando ( - potresti non essere in grado di vederlo!) In un'ambulanza: http://jsfiddle.net/GWqcF/2

Se la tua domanda è come una classe CSS può inserire un carattere specifico (che verrà visualizzato come un'icona nel carattere speciale), dai un'occhiata alla fonte per FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Quindi una direttiva di contenuto CSS viene utilizzata per inserire il carattere (che proviene da una speciale area riservata di Unicode per uso privato che non rovina gli altri lettori).

Come funzionano le icone dei caratteri web?

Le icone dei caratteri web funzionano utilizzando CSS per iniettare un glifo specifico nell'HTML utilizzando la proprietà del contenuto. Quindi utilizza @font-faceper caricare un dingbat webfont che modella il glifo iniettato. Il risultato è che quel glifo iniettato diventa l'icona desiderata.

Per iniziare, avrai bisogno di un file di font web con le icone che ti servono, definite per ASCIIcaratteri particolari (A, B, C, !, @, #, etc.)o nell'area di utilizzo privato del font Unicode, che sono spazi nel font che non saranno usati da caratteri specifici in un Carattere con codifica Unicode.

Per saperne di più, come creare un'icona webfont in Responsive Webfont Icons .