L'utilizzo di web font per generare icone è una tecnica CSS diffusasi solo di recente. Esistono infatti web font specifici per le icone, i quali invece dei normali caratteri alfanumerici visualizzano icone. Per visualizzare tali icone si utilizza il contenuto generato su elementi vuoti. Vediamone i dettagli.
Una volta caricato il web font tramite la regola @font-face, occorre creare degli elementi vuoti per racchiudere le icone:
<span class="twitter-icon"></span>
Si tratta di una tecnica poco semantica e puramente presentazionale. La spiegazione più logica sta nel controllo sul contenuto generato dai CSS. Infatti nel contenuto generato la dimensione finale dell'icona è determinata principalmente dalla proprietà font-size.
A questo punto si definiscono le regole di stile di base:
.twitter-icon {
display: inline-block;
width: 64px;
height: 64px;
text-align: center; /* centratura orizzontale */
line-height: 64px; /* centratura verticale */
font: 3em Webfont, sans-serif;
}
Quindi si usa il contenuto generato con gli pseudo-elementi :before o :after:
.twitter-icon:before {
content: 'A';
}
Qui si presuppone che la lettera A corrisponda all'icona scelta. Ovviamente dovreste sempre testare il font per avere la mappatura completa tra lettere ed icone. Altre volte è necessario inserire una sequenza Unicode, come ad esempio \00XX. Leggete attentamente la documentazione del font per avere maggiori informazioni in tal senso.