Creare icone personalizzate per il web con gli icon font
Mercantinpiazza: completato il rinnovamento dei siti di Blu Nautilus
8 Febbraio 2016
Fusione: tutorial per creare grafica creativa con Adobe Illustrator
13 Maggio 2016
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.
15 Comments
Ottima guida, manca solo di indicare che prima di fare Dowload, bisogna selezionare l’icona altrimenti viene generato un css vuoto.
Ciao e grazie
Grazie mille per l’indicazione Sandro: ho corretto il testo. 😉
Ciao, ci fate sapere come implementare i file generati in un sito joomla 3. Grazie ciao
Ciao Franco, benvenuto nel nostro blog!
Non usiamo Joomla ma ho trovato questi articoli che potrebbero esserti utili:
http://www.joomla.it/e-ancora/articoli-community-3x/8279-come-utilizzare-le-icomoon-di-joomla.html
http://www.html.it/articoli/icon-fonts-personalizzati-con-icomoon/
https://docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts/it
Oltretutto so che Joomla utilizza già al suo interno il set predefinito di icone di IcoMoon.
A presto
Barbara
Ciao articolo molto interessante.
Ma ora come posso fare per inserire le mie nuove icone in WordPress?
Grazie
Buongiorno Stefania,
mi scuso ma a causa di un problema sulla piattaforma non abbiamo visto il commento prima.
Immagino che ormai la mia risposta non serva più.
a me in realtà servirebbe e come 😀
Abbiamo intenzione di preparare a breve un tutorial a riguardo in quanto la risposta non è così immediata.
Cercheremo di pubblicarlo il prima possibile.
A presto!
grazie mille
Come faccio a creare l’icona con InkScape?
Ho un’immagine PNG che apro su InkScape, se la esporto in SVG quando la carico su IcoMoon è bianca l’icona.
Cosa devo fare?
“Prima di esportare in SVG dovrai espandere le eventuali tracce presenti nel disegno”
Credo di essermi perso il passaggio di cui sopra, ma come lo faccio su InkScape?
Grazie
Buongiorno Marco,
mi scuso ma a causa di un problema sulla piattaforma non abbiamo visto il commento prima.
Il file in formato PNG non è un formato vettoriale, quindi dopo averlo aperto con InkScape andrebbe ridisegnato con gli strumenti vettoriali (strumenti forma e curve) in modo da avere a disposizione proprio i tracciati vettoriali.
Successivamente si può procedere con il caricamento su IcoMoon del file SVG esportato da InkScape.
A presto.
invece che rifare tutto, non fa prima a usare un traduttore on line tipo https://pngtosvg.online/it/ o altri?
Grazie per l’indicazione, usando sempre Illustrator non avevo mai avuto bisogno di convertire file PNG in SVG e non conoscevo questo tool on-line.
Articolo molto interessante e utile! Una domanda: è possibile rendere le icon font create sensibili a un evento, per es. un hover?
Grazie! Le icone create in questo modo sono gestibili come fossero un testo qualsiasi quindi possono essere rese sensibili agli eventi (ad es. hover) tramite CSS.
E’ possibile utilizzare la pseudo-classe “:hover” applicandola alla classe “.icon-icona” (facendo riferimento all’esempio nell’articolo) o, meglio ancora, ad un ‘id’ creato appositamente per una specifica icona (es.: se l’icona è <span class="icon-icona" id="my-icon", il codice diventa: #my-icon:hover {…}).