Le icone sono oramai diventate uno standard imprescindibile in qualsiasi sito web e se in tempi neanche tanto lontani avevamo la necessità di utilizzare delle immagini, oramai l’utilizzo di Font Awesome è diventato la prima scelta per la gestione di questo aspetto grafico.
Font Awesome vi permette di usufruire di più di 500 icone vettoriali che possono essere facilmente personalizzabili attraverso le regole del vostro CSS, come qualsiasi altro carattere di testo presente nel sito.
Come si installa Font Awesome?
Gli step da seguire sono semplicissimi, per prima cosa andate nel sito ufficiale di Font Awesome dove potete effettuare il download gratuito del framework:
Potete decidere di utilizzare il file CSS fisico o richiamarlo con i CDN sul modello di Google, ma optate per la prima soluzione ricordando che in entrambi i casi non è prevista una buona retro-compatibilità con vecchi browser come Internet Explorer 7 e 8.
Ecco i file che andrete a scaricare.
Successivamente dovete estrarre il CSS di Font Awesome (consigliamo il .min, compresso) e inserirlo nella vostra cartella CSS insieme all’intera cartella fonts a cui il file fa riferimento per gestire le icone. A questo punto vi basta richiamare il file all’interno della head del vostro sito con un semplice collegamento.
Una volta terminati questi passaggi siete pronti per utilizzare le fantastiche Font icons e personalizzare il vostro sito custom.
Come usare Font Awesome in un tema custom di WordPress?
Il meccanismo è ovviamente estremamente semplice e immediato. Vi basta importare nella root principale del tema la cartella fonts e inserire il file .min in una cartella css. Per il collegamento questa volta vi dovete affidare al file functions.php come vedete in figura.
Per quanto riguarda l’utilizzo delle icone, vi basta tornare semplicemente nel sito ufficiale e scoprire come si chiama l’icona che volete.
Supponiamo per esempio di voler inserire nel menù principale l’icona home al posto del testo. Dalla sezione Icons del sito (dove avete l’intera lista delle icone a disposizione) utilizzate il motore di ricerca inserendo la parola “home”.
Come potete vedere in figura vi vengono dati dei suggerimenti.
Cliccate sull’icona che vi interessa e in pochi istanti otterrete il codice per il suo utilizzo.
Per la formattazione dell’icona, è sufficiente gestirla come un semplice marcatore di testo dal vostro file CSS.
Ricordate che ogni tanto viene rilasciata una nuova versione con nuove icone, quindi è necessario aggiornare manualmente il file CSS per poterne usufruire.
Ora non vi resta che provare Font Awesome e scegliere le vostre icone preferite.
Buon divertimento e buon lavoro.
Per scaricare le slide segui questo link.
Ancora nessun commento