Facendo uso del carattere Genericons nel tuo sito web

Credo che i font icon siano una delle più grandi idee mai nate nell'età d'oro del web design. Alcuni grandi ragazzi di Automattic probabilmente si sentono allo stesso modo, dal momento che hanno deciso di inventare un simpatico font di nome Genericons. In questo articolo, impareremo come sono fantastici i font delle icone e come utilizzare il font Genericons.

L'importanza dei caratteri icona

Come ho detto, stiamo vivendo l'epoca d'oro del web design. Le nuove tecnologie nascono ogni giorno e i browser le adottano rapidamente. Oltre alle nuove tecnologie, ci sono nuove tecniche di progettazione che vengono in tutto il mondo.

In questa era d'oro, il web design reattivo è probabilmente uno dei concetti più popolari. In un mondo pieno di dispositivi diversi che si collegano a Internet come laptop, tablet e smartphone, modelliamo i nostri progetti in base alle dimensioni del dispositivo e alla densità dei pixel. Come web designer, è diventata un'abitudine quotidiana spostare elementi e scalare la grafica per far funzionare il nostro design in una varietà di dispositivi, dai monitor Apple da 27 pollici ai Kindle.

Ecco dove i font di icone tornano utili.

Vantaggi dell'utilizzo di caratteri icona

Come dono del responsive web design, i font icon vengono utilizzati per offrire un pacchetto di grafici ottimizzato e scalabile ai visitatori su qualsiasi dispositivo. Inoltre, la loro compatibilità cross-browser ci consente di farli funzionare anche con i vecchi browser, così i nostri nonni e i ragazzi del DMV possono anche godere di icone nuove e croccanti!

A parte gli scherzi, ecco i principali vantaggi che puoi trarre da un font icon:

I caratteri dell'icona sono scalabili. Ciò significa che, a prescindere dalla grandezza dell'icona, non è necessario scendere a compromessi in termini di qualità dell'immagine o dimensioni del file.
I caratteri icona possono essere migliorati con semplici linee di CSS. Non devi aprire il tuo vecchio editor di immagini per cambiare i loro colori o aggiungere ombre a loro. Trasparenza? Dai un'occhiata. Gradienti CSS? Dai un'occhiata. Rotazione 3D? Dai un'occhiata. Hai un'idea. Con poche righe di codice CSS, puoi fare quasi tutto ciò che puoi fare nel tuo testo. Dopotutto, queste icone sono tecnicamente parti di testo.
I font Icon hanno un fantastico supporto per i browser. Dal momento che sono font e persino Internet Explorer 7 supporta i font, non devi preoccuparti se non compariranno sui browser più vecchi.
I caratteri dell'icona sono di dimensioni ridotte. Questo potrebbe sembrare un argomento controverso (dal momento che un pacchetto di icone PNG potrebbe essere piccolo quasi quanto i font di icone), ma è possibile vedere che il formato WOFF di Genericons, ad esempio, ha una dimensione di file di soli 11 KB. Inoltre, devi includere cose come my-icona-2x.png se hai bisogno di immagini più grandi. Inoltre, i caratteri icona fanno solo una richiesta HTTP.

Chris Coyier ha una pagina dimostrativa per i font di icone dove afferma alcuni dei vantaggi dei font di icone e consente di provarli.

Il set di icone Genericons, a partire da dicembre 2013

Usando Genericons

Genericons è un font di icone piuttosto grande creato da Automattic, anche i fondatori di WordPress. Il font include 121 icone a partire dalla fine del 2013, e sta crescendo ogni tanto. È anche concesso in licenza con la GPL, quindi possiamo utilizzare questo dolce pacchetto di icone in tutti i nostri progetti open source con licenze compatibili.

Se non si sta utilizzando un carattere icona nel proprio sito Web WordPress, ora potrebbe essere il momento di includere Genericons!

Comprenderlo nel tuo tema

Se si desidera utilizzare questo carattere di icona nel tema, sono solo alcuni semplici passaggi da seguire:

Scarica Genericons facendo clic sul gigante Scaricare pulsante sul sito web.
Carica il font cartella nella cartella principale del tema. Se lo desideri, puoi rinominare la cartella e inserirla in un'altra cartella.
Copia il contenuto del genericons.css file nel tuo tema style.css file. (Se hai cambiato il nome e il percorso della cartella dei font, non dimenticare di apportare modifiche al CSS per correggere il percorso dei file dei font.)

Questo è tutto, il tuo tema è ora compatibile con Genericons al 100%! Ora puoi usare le icone nei tuoi elementi HTML come questo:

 Questo link ha l'icona della tavoletta!

Se si desidera utilizzare un'icona come elemento separato, è necessario utilizzare il Elemento HTML, come questo:

Questo link ha anche l'icona della tavoletta!

Si noti che è necessario utilizzare due classi CSS: genericon e genericon- icona-name. Non ho intenzione di incollare i nomi delle icone in questo articolo (perché le nuove icone vengono aggiunte regolarmente al font) ma puoi vedere un elenco categoriale di nomi di icone all'interno del genericons.css file. In alternativa, puoi controllare genericons.com e fare clic su ciascuna icona per vedere il nome pertinente.

Usandolo con il plugin Genericon

Se non vuoi integrare il carattere nel tuo tema e utilizzare il pacchetto di icone con un plugin separato, puoi usare il plugin di Genericon su wordpress.org.

L'utilizzo è quasi lo stesso: è sufficiente aggiungere un'altra classe di nome genericond:

Questo link ha l'icona della tavoletta! Questo link ha anche l'icona della tavoletta!

In alternativa, puoi usare uno shortcode:

[genericon icon = tablet] Questo link ha anche l'icona della tavoletta!

Si noti che questa volta è necessario utilizzare solo il nome dell'icona.

Conclusione

I font Icon sono popolari per una serie di motivi: scalabilità, facilità d'uso e compatibilità con le versioni precedenti. Con un file di piccole dimensioni, ogni web designer e sviluppatore può trarre vantaggio da questa fantastica piccola tecnica.

Cosa ne pensi di Genericons? Condividi i tuoi commenti con noi qui sotto! E se ti è piaciuto l'articolo, condividilo per far sapere anche ai tuoi amici di Genericons!

Codice