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

1. FONT
AWESOME, PIÙ
ICONE PER I
WEB DESIGNER
docente Simone Baldassin

2. COME INSERIRE E
USARE QUESTO
STRUMENTO
CORRETTAMENTE
NEL TUO SITO
CUSTOM O IN
WORDPRESS

4. 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.

5. 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.

6. 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:

7. 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.

8. Ecco i file che andrete a scaricare.

9. 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.

10. Una volta terminati questi passaggi siete
pronti per utilizzare le fantastiche Font icons e
personalizzare il vostro sito custom.

11. Come usare Font Awesome in un tema custom
di WordPress?

12. 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.

13. 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”.

14. Come potete vedere in figura vi vengono dati
dei suggerimenti.

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

16. 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.

17. continua la tua formazione su
www.venetoformazione.it/blog