L’utilizzo degli icon font nell’ambito dei progetti web consente l’utilizzo di pittogrammi e simbologie facilmente comprensibili per richiamare l’attenzione su una particolare azione o per sintetizzare un concetto in modo essenziale.

Sono possibili diverse varianti di integrazione e differenti famiglie di icone a disposizione già pronte all’utilizzo, ma ovviamente rimane sempre interessante poter utilizzare un proprio set dedicato.

Vantaggi degli icon font

Dal punto di vista di chi cura la parte di sviluppo di un progetto web, le icone hanno sempre portato a sentimenti contrastanti tra soddisfazione per essere riusciti a comunicare in una piccola effige un concetto e la frustrazione a seguito delle critiche su soggetto, dimensione, colore, nitidezza ed altre caratteristiche.

Lo scenario comune può infatti rivelare che se inizialmente dettagli su questi elementi sono considerati secondari, di fatto in corso di esecuzione il tempo dedicato a queste attività si dilata facilmente.

Quindi avere preventivamente un’offerta del materiale a disposizione, le caratteristiche che è possibile rendere variabili e possibilità di semplificare e ridurre i tempi di intervento in caso di ottimizzazione.

Gli icon font rispondono a questo tratto, condividendo tra i punti:

• incorporazione trasparente anche su progetti già attivi
• possibilità di cambio delle dimensioni e delle caratteristiche cromatiche attraverso la manipolazione dei fogli di stile
• sostituzione od integrazione anche tra famiglie diverse
• fruibilità da dispositivi diversi senza dover aggiungere formati aggiuntivi
• dimensioni contenute rispetto ad opzioni di icona in formato grafico

Soluzione con Font Awesome

La soluzione con Font Awesome risulta di diretta ed immediata esecuzione, attraverso, l’inclusione di un foglio di stile.

L’integrazione consigliata di basa su un servizio CDN attivabile con una singola riga:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

È possibile prendere visione dell’intero set più recente delle icone disponibili e le possibilità di esempio di utilizzo pratico dei codici mnemonici come attributi da aggiungere in HTML.

<i class="icona fa fa-check-square" aria-hidden="true"></i> Esempio di icona Font Awesome

Bonus Font Awesome senza HTML

Se l’inclusione di codice HTML per ottenere le icone è da evitare, rimane la possibilità di utilizzare delle istruzioni CSS, in modo equivalente a quello dell’utilizzo di un carattere specifico. In questo caso è da indicare il codice del carattere equivalente a quello ricavabile dalla tabella di riferimento non mnemonica.

.icona:before {
    position: absolute;
    font-family: "FontAwesome"; 
    content: 'f14a';
}

Anche in questo caso rimane possibile aggiungere altre istruzioni CSS come il colore e la dimensione.