I Web Font presero piede nel 2012 e diventarono una realtà di uso comune già nel 2013 grazie a vantaggi come responsività e retina design.

 

Installazione

 

Per prima cosa andiamo a scaricare l’ultima versione di Font Awesome, scompattiamo il file e inseriamo il contenuto dove più ci conviene secondo le cartelle del nostro sito, ad esempio:

 

  • css/font-awesome.min.css
  • font/(tutto il contenuto della cartella fonts)

 

 

Possiamo decidere di inserire i file in qualsiasi cartella, l’importante è poi cambiare il path di destinazione che andrà sostituito nel nostro ‘font-awesome.min.css’ . Il nostro sarà ad esempio:

 

 

@font-face{
font-family: ‘FontAwesome’;
src: url('../font/fontawesome-webfont.eot?v=4.3.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../font/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

 

 

Terminato? Bene ora l’ultimo passo dell’installazione: inseriamo nelle nostre pagine il riferimento a Font Awsome tra i tag <head> e </head> del nostro html:

 

<link href=”/css/font-awsome.min.css” rel=”stylesheet/>

 

 

Utilizzo

 

Una volta completati questi semplici passaggi siamo pronti a utilizzare le nostre icone tra i tag <i> utilizzati inizialmente nell’HTML4 per definire il testo corsivo.

Tra i tag non si deve inserire nessun tipo di testo mentre per differenziare le icone si assegna una classe al tag come nell’esempio che segue:

 

<i class=”fa nome-icona></i>

 

 

Se vogliamo quindi vedere l’icona del boccale di birra definita dal nome “fa-beer” il nostro codice diventerà:

 

 

<i class=”fa fa-beer></i>

 

 

che darà come risultato la nostra icona:

 

 

icona_birra

 

Leave a comment