Utilizzo delle iconcine Font Awesome nelle pagine web
Ormai è difficile trovare siti web che non usino le famose iconcine della libreria Font Awesome, che sono completamente gratuite per uso commerciale e di facile utilizzo. La libreria contiene attualmente 634 icone e si trova alla sua versione 4.6.3.
Inizialmente creato per Bootstrap, Font Awesome funziona con tutte le piattaforme e viene usato nella maggioranza dei temi disponibili per WordPress.
Le icone sono vettoriali, mantenendo così la nitidezza anche se visualizzate ad alta risoluzione. La personalizzazione con l’utilizzo del CSS è illimitata: colore, grandezza, ombreggiatura etc.
Le iconcine Font Awesome si possono utilizzare anche per il desktop scaricando ed installando il font sul computer e possono essere utilizzate nei progetti grafici con Adobe Photoshop, Illustrator o altri programmi di grafica ed impaginazione e anche con gli editor testuali. Sul sito Font Awesome è possibile trovare le icone suddivise per categorie: dalle icone per le applicazioni web che costituiscono la categoria più fornita, a icone per il trasporto, pagamento, direzioni, per le principali applicazioni web etc.
Collegamento del sito a Font Awesome
Per l’utilizzo delle iconcine Font Awesome nelle pagine web abbiamo due possibilità:
- Inserire un link personalizzato per il nostro sito al file js di Font Awesome, link che ci viene inviato per e-mail e che ci consente di avere sempre accesso alla versione più recente del font.
- Scaricare il pacchetto, portarlo all’interno della cartella del sito ed inserire il link alla versione compatta del file css che troviamo all’interno della cartella scaricata: font-awesome.min.css.
In entrambi i casi il link viene inserito nella sezione head di tutte le pagine html dove vogliamo inserire le icone oppure nei templates di pagina. Il link personalizzato ricevuto per e-mail si presenta sotto forma di link assoluto al file .js:
<script src="//use.fontawesome.com/2b92bdxxxx.js"></script>
Per la versione scaricata ed inserita nella cartella del sito avremo un link di questo tipo, dove ”nome-cartella” andrà sostituito con il nome della cartella del nostro sito dove sono salvati i font:
<link rel="stylesheet" href="nome-cartella/font-awesome/css/font-awesome.min.css">
Inserimento delle iconcine nel codice HTML
Le iconcine Font Awesome utilizzano il tag specifico <i> ed il prefisso css “fa”. Dentro a questo tag le varie iconcine sono inserite facendo riferimento alla classe CSS specifica. Basta scegliere l’iconcina che vogliamo usare dall’elenco delle icone disponibili e con un click sull’iconcina scelta entrando nella pagina specifica possiamo semplicemente copiare il codice per l’utilizzo. A questa pagina troviamo degli esempi per l’utilizzo da quello comune, a delle classi specifiche per le cinque dimensioni disponibili senza dover scrivere css aggiuntivo, alle iconcine animate, ruotate, etc.
<i class="fa fa-camera-retro"></i>
Conclusioni
Le iconcine Font Awesome sono diventate un must nell’industria web: sono leggere, funzionali, personalizzabili con l’utilizzo del CSS, rendono perfettamente sui dispositivi retina, offrono un’ampia scelta, sono facili a usare, belle da vedere e gratuite. Divertitevi con la magia di Font Awesome!
Diventa un Web Designer! Segui un corso in aula oppure online
Promozioni
Potrebbe interessarti
Commenti