L’articolo di oggi non è una vera e propria guida, ma piuttosto un parlare di un qualcosa che negli ultimi tempi si sta diffondendo a macchia d’olio. Sto parlando naturalmente degli icon fonts. In particolare ci soffermeremo sul noto pacchetto Font Awesome, imparando ad integrarlo in un sito web.
Un icon font è un font che contiene delle icone al posto dei classici caratteri tipografici.
Ma quali sono i vantaggi che ci offre? Bè, principalmente sono due:
– La velocità di caricamento. Com’è noto infatti le immagini inserite nelle pagine web influiscono non poco sul tempo di caricamento delle stesse. Grazie agli icon fonts questi tempi vengono notevolmente ridotti.
– La scalabilità delle immagini. Gli icon fonts in effetti non sono altro che delle immagini vettoriali, da poter ridimensionare senza alcuna perdità di qualità.
Come integrare e utilizzare il pacchetto Font Awesome
Sul web, inesauribile fonte di risorse, si trovano diverse raccolte sia gratis che a pagamento. Quest’oggi parleremo di Font Awesome, un kit di ben oltre 400 icone da usare liberamente in modo gratuito anche nei progetti commerciali.
Tutto quello che dobbiamo fare è recarci su fontawesome.io e scaricare il pacchetto tramite il pulsante del download.
A questo punto dobbiamo estrarre la cartella contenuta nel RAR e posizionarla in quella del nostro progetto web.
Il più è praticamente fatto. Ora basterà inserire il codice che segue all’interno del tag <head> della nostra pagina HTML, facendo riferimento al file font-awesome.min.css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Naturalmente dovrai rimpiazzare il path/to/ con il percorso presente sul tuo PC/server.
Ora che abbiamo integrato l’icon font nella nostra pagina, possiamo provare ad utilizzarlo. Ci viene in aiuto la pagina degli esempi che trovi qui.
Come puoi vedere, per inserire un’icona basterà utilizzare questo tipo di codice:
<i class="fa fa-camera-retro"></i>
Tutto quello che ci occorre quindi per l’inserimento base di un’icona, è l’utilizzo del tag <i> e del nome del carattere (in questo caso fa-camera-retro) preceduto da “fa”.
Grazie alla potenza dei CSS saremo liberi di apportare tutte le modifiche possibili tramite i fogli di stile, cose quindi come il colore, l’ombreggiatura, la grandezza etc. Se ad esempio volessi rendere blu la mia iconcina, userei questo codice:
.fa-camera-retro { color: blue; }
Qui trovi l’elenco completo delle icone utilizzabili, ciascuna con affianco il proprio nome per farvi riferimento. Per altri esempi più dettagliati, visita la pagina linkata prima.
Il metodo d’inserimento più veloce
In realtà esiste un metodo ancora più facile e veloce per implementare Font Awesome nel nostro progetto web.
Anzichè scaricare il pacchetto, estrarre la cartella e posizionarla nella directory del nostro sito, basterà copincollare il codice che segue sempre all’interno del tag <head>.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Fatto? Bene, è tutto qui.
Il non dover scaricare o installare nulla dipende dal fatto che è MaxCDN (un Content Delivery Network) ad ospitare i files necessari al funzionamento dell’icon font, e visto che stiamo parlando di servers online, questo metodo non funzionerà in locale.
Ho voluto parlarti prima di tutto del metodo di default, perché credo che scaricare e avere sul proprio PC/server qualcosa di “fisico” sia sempre la cosa più affidabile.
Per oggi è tutto, buon divertimento con gli icon fonts!
