Creare un proprio icon font

I tempi in cui si poteva scegliere tra i soli caratteri di sistema sono fortunatamente alle spalle da tempo. L’uso di font non standard è diventato consueto nello sviluppo web portando all’ascesa anche gli icon font, l’esempio più noto è certamente la libreria FontAwesome. Questi font hanno la particolarità di mostrare simboli invece dei caratteri tipici dell’alfabeto.

I vantaggi

L’utilizzo di un icon font ha almeno tre indubbi vantaggi:

1. scalabilità senza perdita di definizione;
2. possibilità di modificare le icone contenute nel font in dimensione e colore con la semplice applicazione di proprietà CSS (font-size e color proprio come per qualunque altro font);
3. meno richieste HTTP perché le icone sono racchiuse in un unico file (similmente a come avviene nei CSS sprites).

Da un punto di vista tecnico la visualizzazione delle icone tramite un font non è differente dall’utilizzo di caratteri alternativi (ad esempio i noti Google Fonts) per intestazioni, titoli e paragrafi testuali.

Gli svantaggi

Come per ogni tecnica bisogna valutare anche i possibili svantaggi. Le icone devono essere necessariamente monocromatiche, senza i giusti accorgimenti potrebbero apparire meno nitide rispetto ad un’immagine svg e riservare dei problemi relativi al posizionamento.

Questo articolo su css-tricks analizza impietosamente ogni possibile aspetto negativo. In realtà, a seconda del contesto di utilizzo e delle esigenze di specie, gli icon font possono rappresentare, a mio avviso, un ottimo alleato di ogni web designer.

In linea di massima mi ritrovo più d’accordo con posizioni più equidistanti come questo articolo nel blog di Ben Frain.

Icomoon

Se scegliamo di utilizzare un icon font siamo quindi di fronte ad un bivio: avvalersi di una libreria come FontAwesome o creare una soluzione personalizzata? Come sempre la risposta dipende dalle proprie esigenze e dalla natura del progetto.

Nel caso però in cui si voglia creare procedere autonomamente segnalo il sito icomoon. In modo molto intuitivo si potrà creare un proprio font a partire da una libreria gratuita o importando i propri file svg. Risulterà certamente utile una preventiva lettura della documentazione presente sul sito.

Quando avremo esportato il nostro icon font e copiato i file necessari nel nostro progetto, disporremo per ciascuna icona di una classe simile a questa.

Nell’HTML dovremo predisporre conseguentemente un elemento <span> a cui potremo applicare a piacimento le regole CSS applicabili ai caratteri. La proprietà font-size, ad esempio, modificherà le dimensioni dell’icona, la proprietà color il colore.

Sarà possibile, inoltre, sottoscrivere un abbonamento per disporre di funzionalità aggiuntive, ad esempio la possibilità di generare file woff2 o incorporare i font nei file CSS.