Il pannello di amministrazione standard di WordPress ha un aspetto ordinato, ma registra un paio di custom post type e il menu si trasforma in un miscuglio di icone predefinite tutte uguali. «Articoli», «Pagine», il tuo «Portfolio», «Testimonianze», tutti con lo stesso pittogramma a puntina. L'occhio inciampa, il cliente si confonde e l'area di amministrazione perde la sua rifinitura.

Potresti installare un plugin per le icone personalizzate. Potresti caricare Font Awesome e importare oltre 2.000 icone solo per usarne cinque. Oppure puoi evitare entrambe le cose, perché WordPress include il font di icone Dashicons integrato dalla versione 3.8. Nessuna dipendenza aggiuntiva, nessun CSS extra. È tutto già sul tuo server.

In questa guida vedremo come usare Dashicons per i custom post type, nel frontend del tuo tema e tramite un pratico shortcode, con esempi di codice funzionanti che puoi copiare e incollare subito.

💡 Panoramica rapida:

• Registra un custom post type, imposta l'argomento menu_icon su una classe CSS Dashicon e l'icona appare nell'amministrazione senza un solo plugin.
• Carica wp_enqueue_style('dashicons') nel frontend e inserisci le icone tramite un tag HTML <span> in qualsiasi punto del tema.
• Crea uno shortcode [dashicon icon="..."] e il cliente aggiunge icone ai contenuti senza toccare codice.

Cosa sono le Dashicons e perché ti servono

Dashicons è il font di icone ufficiale per il pannello di amministrazione di WordPress. È arrivato con la versione 3.8 insieme a un importante restyling dell'amministrazione ed è usato da allora per ogni voce del menu laterale: «Articoli», «Media», «Plugin», «Impostazioni», tutte Dashicons.

Il font contiene circa 300 icone che coprono quasi ogni esigenza: tipi di contenuto, media, social network, editor, notifiche, tassonomie, widget. Un catalogo completo e ricercabile è disponibile sulla pagina Dashicons nelle Risorse per sviluppatori di WordPress.

Il vantaggio principale rispetto a qualcosa come Font Awesome è il costo zero di inclusione. Dashicons è già caricato nell'amministrazione e per il frontend lo aggiungi con una sola riga nel functions.php. Non stai trascinando una libreria di oltre 2.000 icone sul tuo sito quando il 90% non verrà mai usato. Se invece ti serve un set personalizzato, dai un'occhiata a Fontello, dove puoi costruire un foglio di stile solo con i glifi che scegli.

Una nota importante: il progetto Dashicons ha smesso di accettare richieste per nuove icone a giugno 2023. Il set esistente è congelato, ma per le tipiche attività WordPress copre ancora le tue esigenze con ampio margine.

Metodo 1: Icona per un custom post type

Lo scenario più comune è registrare un nuovo tipo di contenuto tramite register_post_type e volere un'icona significativa accanto al suo nome nell'amministrazione invece della «puntina» predefinita.

Lo fai con l'argomento menu_icon:

1
/**
2
 * Registers a custom post type "Portfolio" with a Dashicons icon.
3
 * Code goes into the theme's or child theme's functions.php.
4
 */
5
function sd_register_portfolio_post_type() {
6
    register_post_type( 'portfolio', array(
7
        'public'      => true,
8
        'label'       => __( 'Portfolio', 'textdomain' ),
9
        'menu_icon'   => 'dashicons-portfolio',
10
        'has_archive' => true,
11
        'supports'    => array( 'title', 'editor', 'thumbnail' ),
12
    ) );
13
}
14
add_action( 'init', 'sd_register_portfolio_post_type', 0 );

Il valore di menu_icon è la classe CSS dell'icona. Vai alla pagina Dashicons, clicca l'icona che vuoi e copia la sua classe dal tooltip. Basta fornire dashicons-{slug} e WordPress renderizzerà automaticamente l'icona nel menu laterale.

Prima delle Dashicons dovevi specificare un URL immagine diretto per menu_icon. In un sito con una dozzina di plugin, le icone saltavano per stile e l'area di amministrazione appariva sciatta. Ora tutte le icone dei tipi di contenuto ereditano lo stile unificato dell'interfaccia di WordPress, pulito e senza sforzo.

Lo stesso approccio funziona per le pagine aggiunte tramite add_menu_page:

1
add_menu_page(
2
    __( 'My Reports', 'textdomain' ),
3
    __( 'Reports', 'textdomain' ),
4
    'manage_options',
5
    'my-reports',
6
    'sd_render_reports_page',
7
    'dashicons-chart-area',
8
    25
9
);

Passate la classe Dashicon come quinto parametro dopo la funzione di callback e la nuova voce di menu riceverà un'icona della stessa famiglia di tutte quelle standard.

Metodo 2: Dashicons nel frontend del tema

Le icone sono utili anche oltre l'amministrazione. I meta dei post (data, categoria, autore), un pulsante di ricerca nell'header, l'icona del carrello: sono tutti casi tipici in cui un'icona rende l'interfaccia più chiara.

Per abilitare i Dashicons sul lato pubblico del sito, aggiungete a functions.php:

1
/**
2
 * Enqueues the Dashicons stylesheet on the frontend.
3
 * Code goes into the child theme's functions.php.
4
 */
5
add_action( 'wp_enqueue_scripts', function() {
6
    wp_enqueue_style( 'dashicons' );
7
} );

Ora potete inserire un'icona via HTML in qualsiasi template del tema:

1
<span class="dashicons dashicons-calendar"></span>

Sostituite calendar con lo slug dell'icona che vi serve e questa verrà visualizzata. Questo HTML funziona ovunque nel tema: header.php, footer.php, single.php, persino direttamente nel campo "Etichetta di navigazione" di una voce di menu (WordPress consente l'HTML nelle etichette di navigazione).

Per raggruppare un'icona con del testo, usate la classe helper dashicons-before; aggiunge l'icona prima del contenuto dell'elemento senza markup aggiuntivo:

1
<h2 class="dashicons-before dashicons-smiley">Welcome Heading</h2>

Metodo 3: Shortcode per inserire icone nei contenuti

Se state costruendo un sito per un cliente che non lavora con l'HTML, fornitegli uno shortcode. Aggiungete il codice a functions.php una volta sola e il cliente potrà inserire un'icona in qualsiasi post tramite [dashicon icon="..."].

1
/**
2
 * Registers the shortcode [dashicon icon="..."] to insert Dashicons into content.
3
 * Requires prior enqueuing of dashicons via wp_enqueue_style (Method 2).
4
 * Code goes into the theme's functions.php or a separate included file.
5
 */
6
add_shortcode( 'dashicon', function( $atts ) {
7
    $atts = shortcode_atts( array(
8
        'icon' => 'menu',
9
    ), $atts, 'dashicon' );
10
 
11
    if ( ! empty( $atts['icon'] ) ) {
12
        return sprintf(
13
            '<span class="dashicons dashicons-%s"></span>',
14
            esc_attr( $atts['icon'] )
15
        );
16
    }
17
 
18
    return '';
19
} );

Utilizzo nell'editor:

1
[dashicon icon="chart-pie"]

Lo shortcode presuppone che abbiate già registrato lo stile Dashicons sul frontend (Metodo 2). Se non lo avete fatto, l'icona non verrà visualizzata. In alternativa, potete incorporare wp_enqueue_style direttamente nel corpo dello shortcode, in modo che lo stile venga caricato solo quando un'icona è effettivamente usata. Questo approccio ha però un limite: il foglio di stile viene caricato nel footer della pagina, facendo "lampeggiare" le icone dopo il rendering. L'inclusione globale è più affidabile.

Bonus: Dashicons nei blocchi Gutenberg

Se sviluppate blocchi personalizzati, i Dashicons funzionano anche lì. Quando registrate un blocco tramite registerBlockType, impostate il parametro icon con il nome di un Dashicon:

1
registerBlockType( 'my-plugin/my-block', {
2
    apiVersion: 2,
3
    title:    'My Block',
4
    icon:     'dashicons-admin-site',
5
    category: 'design',
6
    edit()   {},
7
    save()   {},
8
} );

Per i componenti React nell'amministrazione, è disponibile un componente Dashicon già pronto dal pacchetto @wordpress/components:

1
import { Dashicon } from '@wordpress/components';
2
 
3
const MyComponent = () => (
4
    <div>
5
        <Dashicon icon="admin-home" />
6
        <Dashicon icon="products" />
7
        <Dashicon icon="wordpress" />
8
    </div>
9
);

Questo funziona solo nell'amministrazione (editor a blocchi, pagine delle impostazioni). Nel frontend il componente Dashicon non carica automaticamente gli stili; lì avete comunque bisogno di wp_enqueue_style('dashicons').

⁉️🤔 Domande frequenti

Devo installare un plugin per usare i Dashicons?

No. I Dashicons sono integrati nel core di WordPress dalla versione 3.8. Nell'amministrazione vengono caricati di default. Per il frontend basta una sola riga (wp_enqueue_style('dashicons')) in functions.php.

Perché i Dashicons sono migliori di Font Awesome?

Leggerezza e zero dipendenze esterne. Font Awesome contiene oltre 2.000 icone, la maggior parte delle quali non vi serviranno mai. I Dashicons ne hanno circa 300, tutte pensate per WordPress, e il foglio di stile è già sul vostro server. Se l'icona esiste nel catalogo Dashicons, usatela ed evitate appesantimenti inutili.

Quali icone sono disponibili nei Dashicons?

Circa 300: tipi di post, media, social network, editor, notifiche, tassonomie, widget e glifi specifici di WordPress (Prodotti, Buddicons). Un elenco completo e ricercabile si trova su developer.wordpress.org/resource/dashicons.

Posso aggiungere una mia icona ai Dashicons?

No. Da giugno 2023 il progetto non accetta più richieste per nuove icone. Se il glifo che vi serve non è nel catalogo, usate Font Awesome, Fontello o caricate un SVG personalizzato.

Perché le icone non compaiono nel frontend?

Molto probabilmente avete dimenticato di chiamare wp_enqueue_style('dashicons'). Controllate il vostro functions.php: la chiamata deve essere agganciata a wp_enqueue_scripts. Un'altra possibile causa è un tema o un plugin che rimuove i Dashicons tramite wp_dequeue_style.

Vale la pena usare i Dashicons nel 2026

Risposta breve: sì, per l'amministrazione e per semplici esigenze nel frontend. Dashicons significa zero overhead, rendering prevedibile e piena integrazione con l'interfaccia di WordPress. Per i custom post type e le voci del menu di amministrazione resta lo standard de facto.

Capite i limiti fin da subito: il set di icone è congelato e non verranno aggiunte nuove icone. Se state costruendo un sito dal design visivo ricco, Font Awesome o uno sprite SVG personalizzato vi daranno più flessibilità. Ma per la maggior parte delle attività tipiche di WordPress il font integrato è più che sufficiente, e trascinarsi dentro una libreria da oltre 2.000 glifi per tre icone non ha senso.

Il modo più rapido per aggiungere un'icona a un custom post type è copiare la classe dal catalogo Dashicons e inserirla in menu_icon. Richiede 30 secondi e non necessita di alcun plugin.

Se questo materiale vi è stato utile, guardate il video tutorial sull'uso dei Dashicons nei menu di navigazione: è in inglese, ma ogni passaggio è mostrato a schermo, quindi potete seguirlo anche senza traduzione.