Le panneau d’administration standard de WordPress paraît bien ordonné, mais enregistrez deux ou trois types de publication personnalisés et le menu se transforme en un fouillis d’icônes par défaut identiques. «Articles», «Pages», votre «Portfolio», «Témoignages», tous avec le même pictogramme en forme de punaise. Le regard accroche, le client s’y perd et l’espace d’administration perd en qualité.

Vous pourriez installer une extension pour des icônes personnalisées. Vous pourriez charger Font Awesome et embarquer plus de 2 000 icônes pour n’en utiliser que cinq. Ou vous pourriez vous passer des deux, car WordPress intègre la police d’icônes Dashicons depuis la version 3.8. Aucune dépendance supplémentaire, aucun CSS additionnel. Tout est déjà sur votre serveur.

Dans ce guide, nous allons voir comment utiliser Dashicons pour les types de publication personnalisés, sur le front-end de votre thème et via un shortcode pratique, avec des exemples de code fonctionnels que vous pouvez copier-coller immédiatement.

💡 Aperçu rapide:

• Enregistrez un type de publication personnalisé, définissez l’argument menu_icon sur une classe CSS Dashicon, et l’icône apparaît dans l’administration sans la moindre extension.
• Mettez en file d’attente wp_enqueue_style('dashicons') sur le front-end et insérez des icônes via une balise HTML <span> n’importe où dans votre thème.
• Créez un shortcode [dashicon icon="..."] et le client ajoute des icônes dans le contenu sans toucher au code.

Ce que sont les Dashicons et pourquoi vous en avez besoin

Dashicons est la police d’icônes officielle du panneau d’administration de WordPress. Elle est arrivée avec la version 3.8 en même temps qu’une refonte majeure de l’administration et elle est utilisée depuis pour chaque élément du menu de gauche: «Articles», «Médias», «Extensions», «Réglages», tout est en Dashicons.

La police contient environ 300 icônes couvrant la quasi-totalité des besoins: types de publication, médias, réseaux sociaux, éditeur, notifications, taxonomies, widgets. Un catalogue complet et consultable est disponible sur la page Dashicons des ressources pour développeurs WordPress.

Le principal avantage par rapport à quelque chose comme Font Awesome, c’est un coût d’intégration nul. Dashicons est déjà chargée dans l’administration et, pour le front-end, vous l’ajoutez avec une seule ligne dans functions.php. Vous ne traînez pas une bibliothèque de plus de 2 000 icônes sur votre site alors que 90% ne serviront jamais. Si vous avez besoin d’un jeu personnalisé, jetez un œil à Fontello, qui vous permet de construire une feuille de styles à partir des seuls glyphes que vous choisissez.

Une remarque importante: le projet Dashicons a cessé d’accepter les demandes de nouvelles icônes en juin 2023. Le jeu existant est figé, mais pour les tâches WordPress courantes, il couvre encore largement vos besoins.

Méthode 1: Icône pour un type de publication personnalisé

Le scénario le plus fréquent consiste à enregistrer un nouveau type de publication via register_post_type et à vouloir une icône parlante à côté de son nom dans l’administration, plutôt que la «punaise» par défaut.

Vous faites cela avec l’argument 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 );

La valeur de menu_icon est la classe CSS de l’icône. Rendez-vous sur la page Dashicons, cliquez sur l’icône souhaitée et copiez sa classe depuis l’infobulle. Fournissez simplement dashicons-{slug}, et WordPress affichera automatiquement l’icône dans le menu de gauche.

Avant Dashicons, il fallait spécifier une URL directe d’image pour menu_icon. Sur un site avec une dizaine d’extensions, les icônes partaient dans tous les sens en termes de style et l’administration paraissait bâclée. Désormais, toutes les icônes de types de publication héritent du style unifié de l’interface WordPress, propre et sans effort.

La même approche fonctionne pour les pages ajoutées via 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
);

Passez la classe Dashicon en cinquième paramètre après la fonction de rappel, et le nouvel élément de menu reçoit une icône de la même famille que toutes les icônes standard.

Méthode 2: Dashicons dans le frontend de votre thème

Les icônes sont utiles au-delà de l'administration. Les métadonnées d'un article (date, catégorie, auteur), un bouton de recherche dans l'en-tête, une icône de panier: voilà des emplacements typiques où une icône rend l'interface plus claire.

Pour activer Dashicons sur la partie publique du site, ajoutez ceci dans 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
} );

Vous pouvez maintenant insérer une icône via du HTML dans n'importe quel template du thème:

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

Remplacez calendar par le slug de l'icône souhaitée, et elle s'affiche. Ce HTML fonctionne partout dans le thème: header.php, footer.php, single.php, et même directement dans le champ «Navigation Label» d'un élément de menu (WordPress autorise le HTML dans les libellés de navigation).

Pour grouper une icône avec du texte, utilisez la classe utilitaire dashicons-before; elle ajoute l'icône avant le contenu de l'élément sans balisage supplémentaire:

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

Méthode 3: Shortcode pour insérer des icônes dans le contenu

Si vous construisez un site pour un client qui ne travaille pas avec du HTML, donnez-lui un shortcode. Vous ajoutez le code dans functions.php une seule fois, et le client insère une icône dans n'importe quel article via [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
} );

Utilisation dans l'éditeur:

1
[dashicon icon="chart-pie"]

Le shortcode suppose que vous avez déjà chargé la feuille de style Dashicons sur le frontend (Méthode 2). Si ce n'est pas le cas, l'icône ne s'affichera pas. Vous pouvez aussi intégrer wp_enqueue_style directement dans le corps du shortcode pour que le style ne se charge que lorsqu'une icône est réellement utilisée. Mais cette approche a un inconvénient: la feuille de style se charge dans le pied de page, ce qui provoque un «flash» des icônes après le rendu. L'inclusion globale est plus fiable.

Bonus: Dashicons dans les blocs Gutenberg

Si vous développez des blocs personnalisés, Dashicons y fonctionnent également. Lors de l'enregistrement d'un bloc via registerBlockType, définissez le paramètre icon avec un nom 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
} );

Pour les composants React dans l'administration, un composant Dashicon prêt à l'emploi est disponible depuis le package @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
);

Cela ne fonctionne que dans l'administration (éditeur de blocs, pages de réglages). Sur le frontend, le composant Dashicon n'importe pas les styles; vous devez quand même y appeler wp_enqueue_style('dashicons').

⁉️🤔 Foire aux questions

Dois-je installer une extension pour utiliser Dashicons?

Non. Dashicons est intégré au cœur de WordPress depuis la version 3.8. Dans l'administration, il est chargé par défaut. Pour le frontend, une seule ligne (wp_enqueue_style('dashicons')) dans functions.php suffit.

Pourquoi Dashicons est-il meilleur que Font Awesome?

Poids et absence de dépendance externe. Font Awesome contient plus de 2 000 icônes, dont la plupart ne vous serviront jamais. Dashicons en compte environ 300, toutes conçues pour WordPress, et la feuille de style est déjà sur votre serveur. Si l'icône existe dans le catalogue Dashicons, utilisez-la et évitez le superflu.

Quelles icônes sont disponibles dans Dashicons?

Environ 300: types de publication, médias, réseaux sociaux, éditeur, notifications, taxonomies, widgets et glyphes spécifiques à WordPress (Produits, Buddicons). Une liste complète et consultable se trouve sur developer.wordpress.org/resource/dashicons.

Puis-je ajouter ma propre icône à Dashicons?

Non. Depuis juin 2023, le projet n'accepte plus de demandes de nouvelles icônes. Si le glyphe dont vous avez besoin n'est pas dans le catalogue, utilisez Font Awesome, Fontello ou importez un SVG personnalisé.

Pourquoi les icônes ne s'affichent-elles pas sur le frontend?

Vous avez probablement oublié d'appeler wp_enqueue_style('dashicons'). Vérifiez votre functions.php: l'appel doit être accroché à wp_enqueue_scripts. Une autre cause possible est un thème ou une extension qui supprime Dashicons via wp_dequeue_style.

Est-ce que ça vaut le coup d'utiliser Dashicons en 2026

En bref: oui, pour l'administration et les besoins simples du frontend. Dashicons signifie zéro surcharge, un rendu prévisible et une intégration complète avec l'interface de WordPress. Pour les types de publication personnalisés et les éléments de menu d'administration, cela reste le standard de facto.

Comprenez les limites dès le départ: le jeu d'icônes est figé et aucune nouvelle icône ne sera ajoutée. Si vous construisez un site avec un design visuel riche, Font Awesome ou un sprite SVG personnalisé vous offriront plus de flexibilité. Mais pour la plupart des tâches WordPress courantes, la police intégrée est largement suffisante, et importer une bibliothèque de plus de 2 000 glyphes pour trois icônes n'a aucun sens.

Le moyen le plus rapide d'ajouter une icône pour un type de publication personnalisé est de copier la classe depuis le catalogue Dashicons et de la placer dans menu_icon. Cela prend 30 secondes et ne nécessite aucune extension.

Si ce contenu vous a été utile, regardez le tutoriel vidéo sur l'utilisation de Dashicons dans les menus de navigation: il est en anglais, mais chaque étape est montrée à l'écran, vous pouvez donc suivre sans traduction.