Il sito FontAwesome fornisce una vasta gamma di icone vettoriali di alta qualità e immagini nitide, potete dire addio alle immagini con pixel sfocati.
Funziona anche con i CSS in modo che i colori, le dimensioni, le ombre e gli altri componenti possono essere facilmente adattati e applicati ad essi.
Nonostante l'ottima qualità dell'immagine sono estremamente leggere e caricano molto rapidamente rispetto alle immagini css sprite.
Il team che sta dietro questo strumento è di grande talento e lavora continuamente per offrire un servizio sempre migliore ed in modo gratuito.
La prima cosa che dovete fare è andare su Modello > Modifica HTML e subito dopo il tag <head> dovete inserire questo codice:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
A questo punto potete aggiungere in qualsiasi parte del vostro blog (post, pagine, widget) l'icona che volete; dovete cliccare sull'icona e prelevare il codice di ognuno di essi:
Per esempio se volete usare l'icona della campana (in inglese "Bell") il codice da inserire in HTML sarà:
<i class="fa fa-bell"></i>Inoltre è possibile modificare il colore, la dimensione, l'ombra usando il css. Per esempio rispettando il nome della classe, in questo caso fa-bell potete eseguire tutte queste personalizzazioni. Il codice che potete usare sarà simile al seguente:
.fa-bell { font-size:20px;lo dovete inserire prima del tag ]]></b:skin> ,
font-weight:bold; color:#111;
border:1px solid #111;
padding:10px; float:left; }
Se avete ancora dei dubbi su come bisogna utilizzare le icone personalizzate potete dare un'occhiata alla pagina degli esempi di Font Awesome.
