#aWPaDay: Dashicons, le icone per wordpress

Hai bisogno di icone personalizzate per wordpress?

Vuoi un’icona personalizzata per gli elenchi puntati?

Ecco come usare Dashicons nel tuo tema o plugin

Introduzione

In questi ultimi tempi, visto l’avvento dei nuovi tablet con schermi Retina, gli sviluppatori di wordpress hanno prestato molta attenzione agli elementi grafici per una piena compatibilità con questi schermi ad alta risoluzione.

Dalla versione 3.8 di WordPress l’interfaccia di amministrazione è infatti molto cambiata perché sono stati utilizzati elementi grafici (le icone) come font e non più come immagini.

Perché questo?

Questo cambiamento è stato fatto per rendere molto più flessibile la struttura grafica della piattaforma. Immaginate di voler cambiare il colore di un icona posta come bullet di un elenco puntato. Cosa dovreste fare? Aprire l’immagine con photoshop o gimp, modificare il colore salvare l’immagine, caricarla  nuovamente sul server ed ecco fatto!!! E se avessimo la necessità di ingrandirla? Lascio a voi la risposta.

E se si potesse cambiare il colore, la grandezza semplicemente cambiando uno stile?

Dici che è impossibile? No, secondo noi è possibile. Senza addentrarci troppo nella discussione, dai un’occhiata a questo link: Font are Awesome.

Visto quante cose possiamo fare? Semplicemente lavorando sul css. Ecco, questo è Dashicon, le icone per wordpress.

Come possiamo utilizzare dashicons nel nostro tema?

Ecco che ora vedremo come utilizzare dashicons nel nostro tema o plugin wordpress.

Prima di tutto dobbiamo includere il codice per dire a wordpress di caricare il css apposito dashicons.css:

add_action( 'wp_enqueue_scripts', 'load_dashicons' );
function load_dashicons() {
 wp_enqueue_style( 'nometema-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );
}

Questo codice includerà quindi il file daschicons.css come dipendenza del file style.css del tema.

Dopo averlo incluso possiamo utilizzare le icone in due modi:

1. Utilizzando lo stile css
2. Mettendo un blocco div con le apposite classi

Vediamo come usare il codice.

Per il primo metodo, utilizzando lo stile, utilizzeremo le pseudo classi :before e :after per appendere l’icona all’elemento selezionato impostando l’icona da visualizzare e il font da utilizzare in questo modo:

div.icona-personalizzata:before {
 font-family: "dashicons";
content: "\f112";
}

Per il secondo metodo invece possiamo direttamente inserire una blocco div con le classi  come seguente:

<div class="dashicons dashicons-admin-network"></div>

Entrambi i metodi visualizzeranno una chiave come icona.

Ma come faccio a conoscere tutti i codici o le classi delle icone?

Qui ci è molto utile il seguente sito che mostra tutte le icone dashicons e dove possiamo prendere il codice sia css che html: lista iconce complete dashicons

Che dite avremo ancora problemi con elementi grafici? Dai che ora possiamo divertirci un pochino, ma non ditelo ai grafici che non faremo più fare a loro le icone.

Dettagli

Livello: basso

Compatibilità: testato su WP versione 3.9.1