Creare icone personalizzate per il web con gli icon font

Mercantinpiazza - Blu Nautilus siti internet by MM Studio
Mercantinpiazza: completato il rinnovamento dei siti di Blu Nautilus
8 Febbraio 2016
Impara ad usare lo strumento Fusione di Adobe Illustrator
Fusione: tutorial per creare grafica creativa con Adobe Illustrator
13 Maggio 2016
Creare icone personalizzate per il web con Icon Font

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.

Google Fonts: il servizio più diffuso per il download di web 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.

Font Awesome: un ricchissimo icon font

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.

IconMoon - servizio per la creazione di icon font basati su icone personalizzate

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, Icona realizzata con Adobe Illsutratorquindi 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.

iconMoon - Web App per trasformare SVG in icon font

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.

IconMoon - creare web font e set di icone personalizzate

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.

IconMoon - creare web font e set di icone personalizzate

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 ? 😀

    

Non sai come inserire nel tuo sito WordPress le tue nuove icone? Seguici… presto pubblicheremo un nuovo tutorial in cui ti spiegheremo come fare!

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.

Barbara Marini
Barbara Marini
co-fondatrice di MM Studio, architetto per formazione, graphic e web designer per passione. Esperta e fan di Photoshop ed Illustrator.

15 Comments

  1. sandro ha detto:

    Ottima guida, manca solo di indicare che prima di fare Dowload, bisogna selezionare l’icona altrimenti viene generato un css vuoto.
    Ciao e grazie

  2. franco duva ha detto:

    Ciao, ci fate sapere come implementare i file generati in un sito joomla 3. Grazie ciao

  3. Stefania ha detto:

    Ciao articolo molto interessante.
    Ma ora come posso fare per inserire le mie nuove icone in WordPress?

    Grazie

  4. Ing. Marco Filippini ha detto:

    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

    • Barbara Marini ha detto:

      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.

  5. Mac ha detto:

    Articolo molto interessante e utile! Una domanda: è possibile rendere le icon font create sensibili a un evento, per es. un hover?

    • Barbara Marini ha detto:

      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 {…}).

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *