Utilizzo delle iconcine Font Awesome nelle pagine web

Dana PC Academy di - 18 luglio 2016 in Web Design

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.

iconcine-font-awesome

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

magic-wand-font-awesomeLe 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

Share

Promozioni

Potrebbe interessarti



Dana PC Academy
Dana è Web Developer e UX Designer. Ex-allieva della PC Academy, si è occupata del restyling della nostra piattaforma lavori ed attualmente collabora alla redazione di articoli dedicati al mondo del Web su questo portale. Collabora come Web Designer con un’agenzia web di Roma. Propone al pubblico rumeno vari corsi, tutorial ed articoli sui canali della sua azienda Multimedia Creations Romania.

Commenti