Icon Font: come usarli nel tuo sito

June 17, 2013
iconfont

Da quando è iniziata l’era dei siti web responsive la velocità di caricamento e la scalabilità delle immagini sono diventate due problematiche sempre nella mente del web designer.

Quando si realizza la versione mobile di un sito web si ha sempre la necessità di ridimensionare icone ed elementi grafici allo scalare del layout. Una tecnica per raggiungere questo obiettivo è utilizzare un font che contenga icone al posto dei caratteri, appunto un Icon Font.

Ma come usarlo in maniera semplice nel layout del nostro sito web?

Possiamo riassumere l’utilizzo di un icon font in alcuni semplici passaggi:

1. Scaricare il pacchetto completo dell’icon font

Prima di tutto devi scegliere l’icon font più adatto al tuo progetto web e scaricarne l’intero pacchetto, di solito contiene il css con le regole per l’inserimento delle icone via CSS e i files del font (TrueType, EOT, SVG, ecc.).

Ecco un elenco dei principali icon fonts che puoi usare: Font Awesome, IcoMoon, Typicons, Entypo, Brandico, PulsarJS, Raphael Icon Set, Modern Pictograms, Social Media Icon Pack, Ikoo, Foundation Icon Font 2, Sosa, Iconic.

2. Collegare il CSS dell’icon font

Nella sezione head del nostro codice HTML inseriamo il riferimento al foglio di stile CSS dell’icon font usando questo codice (esempio fatto utilizzando il font Typicons):

<link rel='stylesheet' href='path/to/typicons.css'/>

3. Verificare collegamenti del font

Apriamo il foglio di stile del nostro font e verifichiamo che i percorsi delle seguenti righe siano corretti:

@font-face { 
 font-family: 'typicons'; 
 src: url("path/to/typicons.eot"); 
 src: url("path/to/typicons.eot?#iefix") format('embedded-opentype'), 
 url("path/to/typicons.woff") format('woff'), 
 url("path/to/typicons.ttf") format('truetype'), 
 url("path/to/typicons.svg#typicons") format('svg'); 
 font-weight: normal; 
 font-style: normal; 
}

4. Inserire l’icona nel nostro codice HTML

A questo punto, dopo aver collegato correttamente i files del nostro icon font, possiamo usarlo semplicemente usando il seguente codice:

<span class="typcn typcn-arrow-left"><span>

Naturalmente per conoscere tutte le classi da utilizzare per le varie icone del nostro font possiamo consultare la pagina del progetto scelto. A questo punto il nostro icon font sarà perfettamente scalabile dato che la dimensione delle icone di regola con font-size come per il normale testo. Inoltre sempre con regole CSS potremo personalizzare il colore delle icone.

4

Aggiungi la tua opinione

Loading Disqus Comments ...
Loading Facebook Comments ...

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close