Negli ultimi anni, nello sviluppo delle UI per il web design, e non solo per quello, è aumentato in modo esponenziale l’utilizzo delle icone. Le motivazioni possono essere molteplici, ma una tra le più probabili (oltre a una crescita lineare dell’analfabetismo e alla mancanza di voglia di leggere) è che con l’utilizzo di una semplice immagine si può comunicare quello che può essere descritto solo con più parole.
Cosa sono le Icon font
Pensate che bella invenzione sarebbe se si potessero utilizzare le icone come delle font, con tutti i vantaggi annessi… ah, giusto, esiste già Font Awesome, progetto nato nel lontano agosto 2013.
Dal 2013, appunto, un’enorme quantità di icone, con carrelli, uomini a lavoro, segnaletica stradale, social icon, animali e chi più ne ha più ne metta, sono disponibili come font per i vostri progetti web. Da allora non c’è stato più bisogno di duplicare e cambiare la dimensione dell’immagine per integrarla nel testo (con risultati spesso pessimi), finalmente l’immagine è testo.
Possiamo facilmente utilizzare le icone sostituendole ai css sprite per gli effetti mouse over o cambiarne con facilità colore e dimensione dall’editor di testo.
Certo il prezzo da pagare è la semplicità dell’immagine, ma al momento viviamo in un mondo flat, ci possiamo accontentare.
Va bene, ora basta con le banalità introduttive e con i già noti avvenimenti. Arriviamo al nocciolo della questione, più o meno.
Come creare Icon font personalizzate per il tuo sito web
Prima di tutto chiediamoci perché creare un nostro set di Icon font personalizzate, quando ormai il web è pieno di progetti simili a Font Awesome con migliaia di icone disponibili.
Il consiglio che potrei darvi è lo stesso che do a chi si ostina a scrivere e a voler pubblicare un suo libro: “Comprane uno già scritto e leggilo. Con una spesa media di 12€ risparmi anni di lavoro e se ti va bene leggi qualcosa di interessante”.
Per fortuna il tempo che si impiega a creare delle icone non è così lungo e in più potrebbe capitare di dover realizzare un sito web per il quale non ci sono icone rappresentative o, magari, non ci soddisfano quelle esistenti.
Iniziamo creando le nostre icone in un editor di grafica vettoriale che ci permetta di esportare i nostri “disegnini” in formato svg. Io utilizzo Illustrator, visto che ci pago la licenza, ma ce ne sono sicuramente di gratuiti.
Non vi lascio nessun input di ispirazione perché se siete capitati qui, avete già pronte le vostre icone e volete solo sapere come fare per inserirle nel vostro progetto senza troppe storie.
Trasformiamo le icone in font
Al momento ci sono un sacco di servizi online che ci permettono di generare le nostre Icon font personalizzate, ma io continuo a usare quello utilizzato per la prima volta 3 anni fa. Sono un sentimentale, mi affeziono ai software.
Si tratta della web app icomoon.io. In realtà la prima volta che ho creato delle icon font personalizzate per un sito web, non c’erano così tanti servizi e questo mi era sembrato il più immediato e quello di più facile utilizzo, e forse lo è ancora.
Cliccando sul taso import in alto a sinistra possiamo caricare i nostri file svg e trasformarli in font.
Per l’occasione ieri notte (dalle 24 alle 24.30) ho creato 6 icone inutili in modalita quick and dirty, come delle cover di album musicali. (Se le riconoscete scrivetemi quali sono nei commenti).
Una volta importati i file svg, potete sistemarli un minimo in dimensioni e allineamento o eliminare il colore. Inoltre potreste aggiungere le altre icone gratuite, presenti nell’app, che possano tornare utili per il vostro progetto. In questo modo avrete solo quelle effettivamente necessarie.
Dopo aver perso una giornata a cercare le icone più adatte per il sito web al quale state lavorando, selezionate quelle presenti nel vostro set e scorrete la pagina verso il basso, quindi cliccate su Generate Font.
Nella pagina visualizzata, potrete cambiare il nome alle font, vedere il codice di utilizzo, associare un codice unicode, e mille altre operazioni, oppure scaricare semplicemente il vostro set.
Come recupero il mio progetto?
Potrebbe accadere (succede anche nelle migliori famiglie), che il cliente voglia aggiungere delle icone, modificarne qualcuna o che tu non sia più soddisfatto di alcune immagini. Nooo, questa volta non è necessario il bestemmione, non bisogna ripartire da zero ma, nel pacchetto che avete scaricato c’è un file selection.json che contiene tutte le informazioni e la configurazione del vostro progetto. Quindi tornate su IcoMoon app, importate questo file e fate le vostre modifiche.
E ora passiamo a wordpress…
Spiegazione ben fatta. Ho seguito i tuoi passi, tuttavia, provando a togliere la dicitura “!important” mi visualizza solo le altre icone del tema.
Ciao Chiara, spesso dipende dalla priorità dei css, del tema e del tuo custom. Se non ti crea problemi tieni pure l'”!important”, soprattutto se vedi sia le tue icon font che quelle del tema sui diversi browser. Io consiglio di toglierlo per evitare di sovrascrivere, involontariamente, altre regole del css.