HomeGuideCome usare le icon font nei propri siti

Come usare le icon font nei propri siti

Giá da qualche tempo si sente parlare di icon font, ovvero quei set di font che racchiudono immagini vettoriali e sono sempre più usati per la produzione di icone

L’adozione delle icon font incrementa le prestazioni delle pagine senza negare nulla all’estetica, fornendo un risultato semplice, pulito e –scusate se é poco– che non sgrana.

Utilizzarle non é nulla di complicato.

Per fare un esempio alla portata di tutti, utilizzerò le Genericons, set di iconfonts incluso nel tema “Twentyfourteen” di WordPress e liberamente scaricabili da qui.

Se state lavorando su questo tema o su un suo child, potrete -ovviamente- evitare;  diversamente, dopo aver copiato la cartella  nella stessa directory del foglio di stile, trascrivete la stringa di importazione che segue.

 /* =Genericons, thanks to FontSquirrel.com for conversion!

————————————————————– */

@font-face {

    font-family: ‘Genericons’;

    src: url(‘font/genericons-regular-webfont.eot’);

    src: url(‘font/genericons-regular-webfont.eot?#iefix’) format(’embedded-opentype’),

         url(‘font/genericons-regular-webfont.woff’) format(‘woff’),

         url(‘font/genericons-regular-webfont.ttf’) format(‘truetype’),

         url(‘font/genericons-regular-webfont.svg#genericonsregular’) format(‘svg’);

    font-weight: normal;

    font-style: normal;

}

Una volta importati files necessari, non resta che scrivere regole le possano sfruttare.

La pseudoclasse di seguito consente di visualizzare una icon font col pollice sugli elementi che la richiamano.

 .pollice-su:before {

content: ‘\f221’;

display: inline-block;

-webkit-font-smoothing: antialiased;

font: normal 86px/1 ‘Genericons’;

vertical-align: top;

}

In questa maniera tutti i div di classe “miodiv“, avranno in testa il nostro bravo pollice in su, il cui codice é ‘\f221’;

la schermata principale del sito genericons.com

Semplice e ben fatto, il sito genericons.com é funzionale all’utilizzo delle icon font proposte: grazie ad uno script, puntando il simbolo interessato, é possibile ottenere il relativo codice da incollare nel proprio foglio di stile, il codice html o il glifo in questione.

Un altro sito di icon font da visitare si chiama Fontello.

la tab dalla quale personalizzazione dei codici

Fontello fornisce più di un set di icone ed é possibile selezionare singolarmente gli elementi desiderati e di personalizzare i nomi e i codici relativi, prima di procedere al download.

E’ vero, si tratta di codici un po’ ostici alla memorizzazione, ma non temete: ai files scaricati é annessa una pagina html esplicativa.

Mai più icone sgranate insomma. Non resta che mettersi al lavoro.

Luigi Lacquaniti
Luigi Lacquaniti
Tecnico e Web designer freelance.

Ultime dal Blog