5 à 7 minutes Niveau : Débutant / Intermédiaire
Objectif de cette astuce
Savoir enrichir les menus de navigation WordPress avec des icônes pour améliorer l’expérience utilisateur, rendre la navigation plus intuitive et donner un aspect plus professionnel au site.
La méthode d’ajout d’icônes dans les menus à partir d’un site créé en Full Site Editing est différente. Un chapitre de cette astuce sera consacré à cette autre méthode.
Bon à savoir l’apparence du tableau de bord de WordPress ne sera pas la même si vous utilisez un thème classique (Twenty TNineteen) ou un Block-thème (Twenty Twenty-Five) notamment la conception des menus et la personnalisation du thème
Pourquoi ajouter des icônes dans les menus ?
Un menu textuel fonctionne, mais une icône associée à chaque lien apporte trois bénéfices concrets : l’œil reconnaît une icône avant de lire le texte, ce qui accélère la navigation ; sur mobile où l’espace est limité, les icônes servent de repères visuels compacts ; et une navigation iconisée cohérente renforce la crédibilité graphique du site.
WordPress ne propose pas cette fonctionnalité nativement dans son éditeur de menus. Il existe deux approches : via un plugin dédié, sans toucher au code, ou via les Dashicons de WordPress, avec quelques lignes de HTML et CSS.
Méthode 1 — Via le plugin Menu Icons (sans code)
Le plugin Menu Icons by ThemeIsle s’intègre directement dans l’écran Apparence → Menus. Une fois installé et activé, il ajoute un bouton “Sélectionner une icône” sur chaque élément du menu.
Installation : Extensions → Ajouter → rechercher “Menu Icons by ThemeIsle” → Installer → Activer.
Une fois activé, dans Apparence → Menus, déroulez l’élément de menu souhaité. Un bouton “Sélectionner une icône” apparaît. En cliquant dessus, une fenêtre modale s’ouvre avec plusieurs bibliothèques d’icônes : Dashicons, Font Awesome, images de la médiathèque ou SVG personnalisé.
Sélectionnez l’icône, configurez sa position (avant ou après le texte), sa taille, puis cliquez sur Insérer. Sauvegardez le menu — l’icône est immédiatement visible sur le front-end.
💡 Si le bouton n’apparaît pas, vérifiez dans Options de l’écran (en haut à droite) que la case “Menu Icons Settings” est cochée.
🛠️ Méthode 2 — Via les Dashicons et le champ Titre (sans plugin)
WordPress intègre nativement une bibliothèque d’icônes vectorielles appelée Dashicons — la même utilisée dans tout le tableau de bord. Plus de 300 icônes disponibles sur developer.wordpress.org/resource/dashicons.
Étape 1 — Trouver le code de l’icône
Sur developer.wordpress.org/resource/dashicons, cliquez sur l’icône souhaitée puis copiez le code HTML : par exemple <span class="dashicons dashicons-admin-settings"></span>.
Étape 2 — Le coller dans le Titre de navigation
Dans Apparence → Menus, déroulez l’élément et repérez le champ Titre de la navigation. Collez le code HTML de l’icône juste avant le texte :
html
<span class="dashicons dashicons-admin-settings"></span> Services⚠️ Si le champ “Titre de la navigation” est absent, activez-le via Options de l’écran en haut à droite.
Étape 3 — Activer les Dashicons côté front-end
Par défaut, les Dashicons ne se chargent que dans l’administration. Il faut les appeler explicitement pour le front-end, dans le functions.php du thème enfant :
php
add_action( 'wp_enqueue_scripts', 'charger_dashicons' );
function charger_dashicons() {
wp_enqueue_style( 'dashicons' );
}Étape 4 — Ajuster via CSS (optionnel)
Pour contrôler la taille et l’alignement des icônes, ajoutez dans votre feuille de styles :
.nav-menu .dashicons {
font-size: 18px;
vertical-align: middle;
margin-right: 4px;
}
Méthode 3 — En Full Site Editing (thème basé sur des blocs)
Cette méthode concerne uniquement les thèmes FSE comme Twenty Twenty-Five ou tout thème basé sur des blocs.
En FSE, il n’y a pas d’écran Apparence → Menus ni de champ “Titre de la navigation”. Le menu est géré via le bloc Navigation dans l’Éditeur de site. Et contrairement à ce qu’on pourrait tenter, il n’est pas possible d’insérer un bloc Groupe ou Image directement dans la structure du menu.
La solution native existe pourtant — elle passe par l’option Image en ligne disponible dans la toolbar de chaque lien. Il existe d’autres solutions via des plugins mais nous allons nous concentrer sur la solution native pour cette astuce.
Étape 1 — Accéder au menu depuis l’Éditeur de site
Aller dans Apparence → Éditeur, puis cliquer sur Navigation dans le menu latéral gauche. La liste des menus existants s’affiche — cliquer sur modifier. Le menu s’ouvre directement en mode édition
Étape 2 — Sélectionner un lien de navigation
Cliquer sur le lien souhaité dans le canvas. La toolbar apparaît au-dessus.
Étape 3 — Insérer une image en ligne
Dans la toolbar, cliquer sur le bouton ▾ (options supplémentaires). Dans le menu déroulant, sélectionner Image en ligne. La fenêtre de la médiathèque s’ouvre — choisir ou uploader une icône SVG ou PNG (taille recommandée : 20×20 px, fond transparent).
L’image s’insère directement dans le texte du lien. Vous pouvez la positionner avant ou après le libellé en la déplaçant dans le lien.
Étape 4 — Ajuster la taille via les réglages de l’image
Une fois l’image insérée, la sélectionner pour accéder à ses réglages de dimensions dans la sidebar droite.
Étape 5 — Répéter et enregistrer
Répéter pour chaque lien, puis Enregistrer.
Préparer les icônes à l’avance : pour un rendu cohérent, uploadez en médiathèque un jeu d’icônes SVG de taille et style identiques avant de commencer. Un SVG monochrome s’adapte mieux aux changements de couleur via CSS.
Attention, pour la sécurité, vous devez utiliser un fichier SVG créé par vous même ou dont vous êtes sûr de la source, car du code malveillant peut être injecté dans le fichier. (Safe SVG est une extension qui vous permet d’uploader dans votre médiathèque et vérifier la vulnérabilité de votre fichier svg)
Récapitulatif — Quelle méthode choisir ?
| Méthode | Pour qui | Avantage | Limite |
|---|---|---|---|
| Menu Icons (plugin) | Débutants, clients | Interface visuelle, pas de code | 1 plugin supplémentaire |
| Dashicons + CSS | Intermédiaires | Sans plugin, intégré à WP | Nécessite quelques lignes de code |
| Blocs FSE (Images/SVG) | Tous niveaux | Contrôle total natif FSE | logique différente, il faut s’y habituer |
Ce qu’il faut retenir
Ajouter des icônes dans les menus est une amélioration visuelle simple qui a un impact réel sur la navigation, surtout sur mobile. Pour un client non-technique, le plugin Menu Icons est la solution idéale — accessible directement depuis l’éditeur de menus. Pour un projet où vous voulez rester léger en extensions, la méthode Dashicons demande quelques lignes de code mais reste propre et sans dépendance tierce. Dans les deux cas, veillez à choisir des icônes cohérentes entre elles pour ne pas alourdir visuellement la navigation.