Icon Fonts: cosa sono e qual’è la loro utilità

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.

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 dovrete rimpiazzare il path/to/ con il percorso presente sul vostro 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 trovate qui. Come potete 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”.

Il tag <i> viene preferito per la sua brevità, ma il sito ci dice che <span> è semanticamente più corretto.

 
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 trovate l’elenco completo delle icone utilizzabili, ciascuna con affianco il proprio nome per farvi riferimento. Per altri esempi più dettagliati, visitate 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 Nwtwork) 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 parlarvi 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!

Potrebbero interessarti anche...