Crea un’icona personalizzata per il web tramite web font, usando Adobe Illustrator ed IcoMoon App

L’utilizzo di icone ed infografiche all’interno di tutti i media di comunicazione è sempre più diffuso.

Anche sul web infografiche ed icone permettono di comunicare velocemente un messaggio o anche solo accompagnare testi ed articoli.

Le icone sono state a lungo considerate un buon modo per migliorare la navigabilità ed usabilità dei siti internet perché forniscono una scorciatoia visiva che aiuta la comprensione di un messaggio altrimenti puramente testuale.

Web font: una rivoluzione per il web design

La diffusione dell’uso di icone è stata potenziata dalla nascita dei web font: questi font  possono essere utilizzati all’interno di una pagina HTML in quanto accessibili da un qualsiasi indirizzo internet e non devono necessariamente essere già installati sul computer dell’utente. Questa novità ha dato la possibilità ai web designer di sbizzarrirsi con font diversi dai soliti Times New Roman, Arial, Georgia, Verdana, che invece era necessario utilizzare fino a qualche anno fa.

Il più diffuso servizio di web font è Google Fonts.

La possibilità, quindi, di utilizzare font diversi da quelli standard ha permesso il diffondersi di font contenenti non caratteri alfabetici ma simboli (icone): Icon Font.

Il più conosciuto è Font Awesome.

Perché usare un icon font

I vantaggi di utilizzare un font per i simboli grafici invece di un’immagine sono numerosi:

• Prima di tutto il fatto di poter essere scalato infinite volte senza perdita di qualità
• Un font è sempre nitido a video
• Possiamo cambiare il colore del simbolo senza dover aprire e modificare l’immagine con un software di editing grafico

Inoltre, esistono anche tool online per la creazione di icon font contenenti le tue icone personalizzate.

Il mio preferito è IcoMoon.

Come creare un icon font

Utilizzando IcoMoon puoi caricare la tua icona in formato SVG e trasformarla in un icon font utilizzabile all’interno del tuo sito internet come web font.

Primo step: disegnamo l’icona

Per ottenere un file in formato SVG puoi utilizzare Adobe Illustrator, ma anche altri software grafici open-source, ad esempio InkScape.

Io adoro Illustrator, quindi ho realizzato la mia icona con Illustrator; puoi scaricarla da qui per provare ad utilizzarla con IcoMoon. Oppure puoi usare una delle tue icone; l’importante è esportare da Illustrator il formato SVG.

Prima di esportare in SVG dovrai espandere le eventuali tracce presenti nel disegno, in quanto IcoMoon non supporta le tracce ma solo i riempimenti. Per convertire le tracce in riempimenti, utilizza il comando OGGETTO -> ESPANDI, dopo aver selezionato gli oggetti con bordi.

A questo punto seleziona FILE -> ESPORTA e scegli il formato SVG. Nella finestra di dialogo che si presenta successivamente lascia impostate le opzioni di default: le personalizzazioni servirebbero soltanto se volessimo utilizzare il formato SVG direttamente sul web, ma noi passeremo da IcoMoon che genererà un apposito foglio di stile CSS per poter utilizzare il font.

Secondo step: creiamo l’icon font utilizzando IcoMoon

Ora apriamo l’app di IcoMoon aprendo il seguente link: https://icomoon.io/app/#/select.

In alto a sinistra trovi il pulsante “Import Icons”. Tramite questo pulsante potrai caricare le tue icone già esportate singolarmente in formato SVG.

L’app crea un nuovo progetto contenente le tue icone. Cliccando sull’icona “occhio” posizionata a destra del titolo del progetto, in fondo, potrai controllare l’anteprima della tua icona in diverse dimensioni: 16,20,24,32,64.

A questo punto, tramite il pulsante in basso a destra “Generate Font”, puoi trasformare le icone selezionate in un web font.

Prima di fare il download, IcoMoon apre una videata intermedia che permette di personalizzare il nome ed il codice associato ad ogni icona.

Infine, dopo aver selezionato l’icona, clicca in basso a destra sul pulsante “Download” per scaricare un file zip contenente i file del font, il file CSS necessario per incorporarlo all’interno di una pagina HTML ed una pagina di esempio demo.html.

Modificando il file CSS potrai modificare velocemente dimensione, colore e sfondi delle tue icone senza perdita di qualità.

Qui sotto un esempio di come la stessa icona può venire personalizzata nella dimensione e nel colore modificando soltanto due righe del CSS collegato.

Caffè o cappuccino ? 😀

Buon divertimento!  😉

[EDIT (27/02/2018)]: ho “finalmente” pubblicato il tutorial su “Come utilizzare icon personalizzate in WordPress“; leggilo e fammi sapere se hai dubbi.