Font Awesome è set di 369 icone liberamente utilizzabili (è rilasciato con licenza MIT) e salvate in formato vettoriale  e per questo possono essere scalate senza perdere qualità.

Le icone sono distribuite come web font, nei quattro formati necessari, e possono essere applicate attraverso i fogli di stile css.

Usare Font Awesome

Scaricare una copia di Font Awesome dal sito ufficiale e decomprimere la cartella. Disporre nel proprio progetto la cartella fonts e il foglio di stile font-awesome.min.css, presente nella cartella css.

Includere il foglio di stile font-awesome.min.css nel documento in cui si vuole utilizzare le icone.

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

Il foglio di stile contiene la regola @font-face in cui si trovano i riferimenti ai file dei font presenti nella cartella fonts e perciò, se si modifica la posizione dei file o il loro nome, è necessario aggiornare gli url indicati nella regola.

Per applicare un’icona è possibile utilizzare diverse tecniche. La prima, mostrata dall’esempio seguente, consiste nell’includere un elemento i con due classi.

<p><i class="fa fa-camera"></i>fa-camera</p>

La classe fa definisce l’aspetto di tutte le icone mentre la classe fa-camera indica l’icona che si vuole inserire. Per vedere le icone disponibili e le relative classi da utilizzare consultare la lista completa delle icone.

Le icone possono essere scalate con la classe fa-lg che le incrementa del 33% o con le seguenti classi: fa-2xfa-3xfa-4xfa-5x.

<p><i class="fa fa-camera"></i> Fotocamera: classe fa-camera</p>
<p><i class="fa fa-camera fa-lg"></i> (33%): classe fa-camera fa-2x</p>
<p><i class="fa fa-camera fa-2x"></i> (doppia): classe fa-camera fa-2x</p>
<p><i class="fa fa-camera fa-3x"></i> (tripla): classe fa-camera fa-3x</p>

La classe fa-fw assegna a tutte le icone una larghezza fissa in modo da non provocare problemi di allineamento, in particolare nell’applicare le icone alle liste.

<p><i class="fa fa-fw fa-video-camera"></i> fa-video-camera</p>
<p><i class="fa fa-fw fa-bolt"></i> fa-bolt</p>

Nelle liste è possibile utilizzare due classi: fa-ul, nell’elemento che definisce il tipo di lista ul o ol, e fa-li in ciascuna voce della lista.

<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-square"></i> fa-square</li>  
    <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li> 
</ul>

Alcune icone possono essere animate con la classe fa-spin.

<p><i class="fa fa-spinner fa-spin"></i> fa-spinner</p>
<p><i class="fa fa-refresh fa-spin"></i> fa-refresh</p>

Per ruotare le icone si usa una delle classi che iniziano per fa-rotate-* con i valori: 90, 180 e 270.

<p><i class="fa fa-tags"></i> fa-tags</p>
<p><i class="fa fa-tags fa-rotate-180"></i> fa-tags</p>

Visualizza la demo relativa agli esempi mostrati nell’articolo.

Altri esempi sono disponibili nel sito ufficiale.

Applicare le icone di Font Awesome ai propri stili css

Font Awesome è solo un webfont e perciò è possibile applicare un’icona a un qualsiasi elemento html come se si trattasse di un qualsiasi altro font.  Nel seguente esempio l’icona viene applicata a un elemento d’intestazione h1.

<h1 class="myfaicon">Lorem ipsum</h1>

Nello stile css per prima cosa si incorpora il font con la regola @font-face, in modo che possa essere applicato all’elemento h1 con classe myfaicon. L’icona viene poi applicata come pseudo-elemento alla classe myfaicon.

@font-face {
  font-family: 'FontAwesome';
  /* Fare attenzione ai percorsi dei file */
  src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.myfaicon:before {
  content: "\f005"; /* Il codice dell'icona */
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  width: 1.2857142857142858em;
  text-align: center;

  /* Tutte le proprietà css che si vuole applicare all'icona: colore, ombreggiatura, rotazione, etc */
  color:#bbb;
  text-shadow:0 0 2px #555;
}

L’icona viene applicata come pseudo-elemento in modo che non interferisca con il font dell’elemento h1. Per ulteriori informazioni sugli pseudo-elementi consultare l’articolo Pseudo-elementi ::before e ::after.