Ente accreditato Regione Veneto n.4271

Font Awesome, più icone per i web designer

Come inserire e usare questo strumento correttamente nel tuo sito custom o in Wordpress

Pubblicato da Simone Baldassin // 3 agosto 2016 // 1.331 visualizzazioni

come usare font awesome

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:

Fontawesome

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.

Fontawesome

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.

Fontawesome

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.

Fontawesome

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.

Fontawesome

Cliccate sull’icona che vi interessa e in pochi istanti otterrete il codice per il suo utilizzo.

Fontawesome

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.

Topic: , ,

Send this to a friend