I font iconografici sono diventati un trend in rapida ascesa e, seppur gran parte degli approcci proposti e usati sono fortissimamente anti-semantici, esistono dei metodi che non prescindono a questo fattore e permettono, oltre a controllare queste “immagini” tramite CSS, di far sì che il nostro codice non sia pieno di tags o scritte inutili, insensate per un motore di ricerca che scansiona la pagina.
Il primo grosso vantaggio nell’utilizzare questo approccio è dato dal fatto che i simboli utilizzati nei fonts sono vettoriali, e non bitmap, di conseguenza non subiscono perdita di qualità se ingranditi. Questo concetto vale per qualsiasi elemento grafico in generale.
Un altro vantaggio nell’utilizzare gli “icon fonts” è il tempo di caricamento. Una volta caricato il font infatti, è possibile utilizzarlo n-volte ed in n-formati diversi con un’unica richiesta al server e non n-richieste. Anche gli sprites CSS sottostanno a questa regola, anche se richiedono un impiego di tempo per l’aggiornamento e, soprattutto, non sono vettoriali.
Vediamo quindi come implementarli correttamente in una pagina web. Utilizzeremo l’Unicons icon pack ed il relativo web font come esempio.
Caricare il font tramite @font-face
Questo è lo stesso procedimento da seguire per caricare qualsiasi fonts tramite l’utilizzo del metodo @font-face. Sarà quindi necessario procurarsi il font in diversi formati. Sul sito fontsquirrel.com c’è un comodo generatore che fa al caso nostro.
@font-face {
font-family: 'unicons';
src:url('fonts/unicons.eot');
src:url('fonts/unicons.eot?#iefix') format('embedded-opentype'),
url('fonts/unicons.svg#unicons') format('svg'),
url('fonts/unicons.woff') format('woff'),
url('fonts/unicons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}Creare una regola CSS da applicare ad ogni icona
Ora che abbiamo caricato il fonts, possiamo iniziare a definire le regole che mostreranno le nostre icone. Utilizzeremo la pseudo classe :before al fine di non aggiungere markup html inutile nel codice (che di fatto andrebbe contro ogni principio logico della semantica!!!). Scegliamo quindi il nome generico di una classe da utilizzare per le nostre icone e procediamo così:
.icon:before {
font-family: "unicons", sans-serif !important;
-webkit-font-smoothing: antialiased;
-o-transform: scale(1);
text-rendering: optimizeLegibility;
}Spieghiamo il significato di ogni regola utilizzata:
- font-family: indica il font che utilizziamo.
- webkit-font-smoothing: utilizza l’antialias nei browser che utilizzano il motore webkit al fine di ammorbidire la resa del font
- o-transform: impostando il valore scale(1) permette che anche su Opera le icone abbiano la dimensione corretta
- text-rendering: attraverso l’uso di optimizeLegibility è possibile abilitare poi funzionalità avanzate come legatura e crenatura.
Creare una classe CSS specifica per ogni icona
Un po’ come accade per gli sprites, ogni icona avrà una sua classe specifica. In questo caso invece di specificare una “background-position” andremo a specificare il carattere da associare al nostro font. La sintassi di base è questa:
.facebook:before {content: "CHARACTER";}Usando questa sintassi ed un valore HEX preceduto dal backslash “\” andremo a definire la nostra icona specifica:
.facebook:before {content: "\e06b";}Dove e06b è il codice corrispondente per mostrare l’icona di facebook nel pacchetto d’esempio.
Il markup HTML
Fortunatamente tutto quello che dovremo scrivere nel nostro markup sarà:
<span class=”icon facebook”>Like Us On Facebook</span>
et voilà! Avremo la nostra icona visibile. Ma se volessimo personalizzarla ulteriormente?
Personalizzare le icone
Una volta inserita la nostra icona CSS possiamo andare a cambiarne le dimensioni ed i colori rapidamente. Se abbiamo bisogno di varianti di colori diversi della stessa icona conviene creare classi generiche per i colori ed utilizzare quindi classi multiple in serie:
.icon-green:before {color: #008000;}
.icon-red:before {color: #ff0000;}
.icon-blue:before {color: #0000ff;}
.icon-yellow:before {color: #ffff00;}
.icon-12:before {font-size: 12px; margin-right: 3px;}
.icon-24:before {font-size: 24px; margin-right: 6px;}
.icon-36:before {font-size: 36px; margin-right: 9px;}
.icon-48:before {font-size: 48px; margin-right: 12px;}Ed il markup HTML sarà il seguente:
<span class=”icon facebook icon-blue icon-36”>Like Us On Facebook</span>
E’ evidente che è possibile utilizzare qualsiasi regola CSS valida applicata alla nostra icona. Ricordiamoci invece che se volessimo vedere l’immagine dopo alla scritta sarà sufficiente utilizzare la pseudo classe :after.
Se invece serve avere un’icona senza testo sarà sufficiente creare un tag vuoto (inevitabile). In questo caso è comunque raccomandabile scrivere comunque del testo utile nel tag e “nasconderlo” via css:
.icon {
text-indent: -9999px;
}Esistono molti altri metodi, tra cui quello proposto da CSS Tricks. Il grosso problema che però presentano è legato appunto alla semantica. A voi quindi la scelta finale!
Articolo ispirato a: How to Use Icon Fonts in Your Website
