Come creare un set di Icon Font personalizzate

Come creare un set di Icon Font personalizzate

Ti sei mai chiesto come si realizza un set di Icon Font personalizzate da utilizzare nel tuo sito web o nel tuo blog?

Sicuramente conosci Font Awesome, la più famosa raccolta che include 600+ Icon Fonts per il web. E sicuramente l’avrai anche utilizzata più volte nei tuoi lavori.

Ma quante volte ti è capitato di non trovare quello che cercavi e dover ripiegare su una banalissima immagine in formato .png?

Oggi ti mostrerò quanto è facile creare dei font personalizzati a partire da semplici file SVG, per realizzare in pochi minuti il font del tuo marchio, della tua calligrafia o di un’altra qualsiasi immagine.

1) Crea l’icona

Come prima cosa dovrai creare la tua icona in formato SVG.

Per farlo, hai tre alternative:

  1. se non hai un’icona, puoi crearla direttamente in Illustrator e salvarla in formato SVG;
  2. se hai già un’icona in formato JPEG, puoi convertirla velocemente utilizzando uno dei tanti tool online (come questo);
  3. puoi scaricare la tua icona da una libreria di immagini gratuite direttamente in formato SVG.

Per questa terza opzione, ti consiglio Flaticon: è una raccolta di oltre 170mila icone, personalizzabili e scaricabili in diversi formati, tra cui PNG, PSD e SVG.

2) Converti l’SVG in FONT

Una volta salvata l’icona, dovrai creare un account su Fontastic all’indirizzo http://app.fontastic.me/

La dashboard è relativamente intuitiva, tutto quello che dovrai fare è caricare il tuo set di icone e pubblicarlo per ottenere il link di inclusione.

Clicca su Add More Icons e poi su Import Icons per caricare le icone e attendi che la conversione sia completata.
Fontastic creerà in automatico una cartella con le tue Icon Fonts personalizzate: potrai gestire la cartella e aggiungere altre Icon Fonts in qualunque momento.

fontastic icon font personalizzate

Dashboard di Fontastic.

3) Incorpora le Icon Font personalizzate nel tuo sito web

Non resta che pubblicare il tuo set di icone ed ottenere il link di inclusione per il tuo sito web.

Seleziona tutte le icone che vuoi pubblicare e clicca su Publish: in questo modo, Fontastic genererà un link che dovrai inserire nella <head> del tuo sito.

Alla voce CSS Class Mapping troverai le classi da aggiungere ad un qualsiasi elemento HTML per attivare l’icona (es: <i class=”icon-gatto”></i>).

Puoi modificare i nomi delle classi cliccando sulla tab Customize nel menu in alto.

fontastic icon font personalizzate

Link di inclusione e classi delle Icon Font.

È tutto! Semplice no?

E tu, conosci qualche altro tool per la realizzazione di set di Icon Fonts?
Lascia un commento e descrivi il tuo metodo preferito!

Related Posts