Un menu de navigation se compose d’items reliant les contenus de votre site sous forme d’une arborescence logique.
Afin d’améliorer l’expérience utilisateur, il n’est pas rare d’ajouter une icône avant ou après l’élément de manière à mémoriser visuellement ce dernier.
Grâce à l’extension Menu Icons, disponible gratuitement, nous allons voir qu’une telle fonctionnalité est très simple à mettre en oeuvre et ne nécessite pas le recours à des techniques complexes telles que les walkers.
Menu Icons s’adresse aux thèmes classiques, dont les menus se gèrent dans Apparence > Menus. Si vous utilisez un thème à blocs, comme Twenty Twenty-Five, rendez-vous directement à la dernière partie de ce tutoriel.
Principales fonctionnalités
Menu Icons s’intègre directement dans l’outil de conception de menus de WordPress, sous Apparence > Menus. Déroulez l’élément auquel vous souhaitez ajouter une icône, puis cliquez sur Sélectionner.
Par défaut, seules les Dashicons sont proposées. Pour activer d’autres familles d’icônes, dépliez la section Paramètres du « Menu Icônes » dans la colonne de gauche (Menu Icons Settings si votre administration est en anglais), cochez-les sous Types d’icônes, dans l’onglet Global, puis cliquez sur Enregistrer les réglages. Si cette section n’apparaît pas, activez-la dans l’onglet Options de l’écran, en haut à droite de votre écran.
Au clic sur Sélectionner, une fenêtre modale apparait, sur la même apparence que l’envoi de médias sous WordPress. Dans la colonne de gauche, faites votre choix parmi les polices personnalisées proposées (Dashicons, Elusive Icons, Font Awesome, Foundation Icons, Genericons) ou bien envoyez vos propres fichiers SVG ou images.
Sélectionnez l’icône de votre choix et configurez les différentes propriétés disponibles sur la partie droite de votre écran (positionnement de l’icône, masquer le label, alignement vertical et taille).
Captures d’écran
Obtenir Menu Icons
Vous pouvez télécharger gratuitement cette extension depuis votre administration WordPress ou à partir du répertoire officiel via ce lien :
Ajouter facilement des icônes dans vos menus de navigation.
Une solution efficace, propre et pratique pour permettre à l’utilisateur final de modifier ses icônes de menus sans coder.
Ajouter une icône dans le bloc Navigation (thème à blocs)
Avec un thème à blocs comme Twenty Twenty-Five, le sous-menu Menus disparaît du menu Apparence, sauf si le thème déclare la prise en charge des menus classiques. Si vous ouvrez tout de même cet écran, WordPress affiche « Le thème actuel n’accepte pas les menus de navigation ni les widgets. » Vos menus se construisent alors avec le bloc Navigation, dans Apparence > Éditeur.
Menu Icons ajoute bien un bouton Menu Icons dans la barre d’outils de chaque lien du bloc Navigation, pour choisir une icône Font Awesome. Mais avec WordPress 7.1, l’icône choisie ne s’affiche pas sur le site : je vous déconseille donc cette option.
Depuis la version 7.0, WordPress propose son propre bloc Icône, accepté dans le bloc Navigation. Sélectionnez le bloc Navigation, cliquez sur le bouton +, puis sur Ajouter un bloc et Tout parcourir ; recherchez « Icône » et insérez le bloc. Cliquez ensuite sur Remplacer dans sa barre d’outils pour choisir l’icône dans la Bibliothèque d’icônes de WordPress (enveloppe, panier, calendrier…), puis déplacez-la à côté du lien concerné.
L’icône forme un élément distinct du lien : elle n’est pas cliquable. Si elle est purement décorative, laissez vide son champ Libellé ; sinon, décrivez-la pour les lecteurs d’écran. Pour des icônes cliquables vers vos réseaux sociaux, utilisez plutôt le bloc Icônes de réseaux sociaux, lui aussi accepté dans le bloc Navigation.
Autre astuce de navigation : rendre un élément de menu parent non cliquable.
18 réponses
Merci pour cet article non seo friendly; du point de vue du nombre de mots.
Du coup pas de blabla, pas de circonvolutions; vous allez à l’essentiel.
Cela ne fonctionne pas. Peux-tu être plus précis dans tes indications.
J’ai vérifier l’onglet Options de l’écran situé en haut à droite de l’écran, que le bloc Menu Icons Settings est bien coché, mais rien y fait. Je n’ai absolument pas les effets escomptés.
Bonjour
Comment peux t on insérer ses propres icônes ?????????
Merci
Bonjour, est ce le plugin peut remplacer celles qui sont sur mon thème ?
Non, si votre thème en affiche il faudra les surclasser.
bonjour,
avec le thème Divi, les icônes n’apparaissent tout simplement pas !
Voyez avec le support de Divi pour ce faire. 😉
On peut le faire assez simplement avec du CSS et les dashicons (ça ne fonctionne pas forcément bien sur tous les thèmes). Un simple ajout de css dans le « titre de la navigation » et le tour est joué!
Avec des balises dans le champ de titre ? Attention au code en sortie si c’est bien de cela dont il s’agit. 🙂
Que veux-tu dire par là? Quel est le risque?
De se retrouver avec du code non désiré sur les éléments de titre… donc prudence.
Bonjour,
je débute sur wordpress/woocommercee et viens d’installer Menus Icons, seulement la fenêtre avec les Icons n’apparaît pas sur l’écran j’ai bien « Menus Icons settings » dans ma page apparence/ menus mias lorsque que j’ouvre Global icons type j’ai la liste ( Dashicons, Elusive Icons, Font Awesome, Foundation Icons, Genericons images SVG) mais pas di’mage d’icons qui s’affiche ?
Pour les utilisateurs finaux c’est top.
Par contre pour les développeurs et autres webmasters, si on veut éviter les walkers… est-ce que ce n’est pas tout simplement possible en CSS (si, par exemple, on veut une icône seulement sur 1 ou 2 liens) ?
Oui bien entendu, la méthode CSS reste valable bien qu’elle manque de souplesse.
J’ai installé le plugin, mais je n’ai que Dashicon comme option, par les autres séries d’icones. Je n’ai même pas la possibilité de mettre mes propres images. Je ne comprend pas pourquoi, peut-être un conflit avec le thème qui dispose déjà cette option, mais en moins bien?
Comme indiqué dans l’article, il faut cocher dans Options de l’écran ce dont tu as besoin. 😉
C’est bon, je n’ai rien dit, j’ai trouvé la solution tout seul comme un grand!
Et bien moi je ne vois toujours pas l’option pour intégrer mes SVG… tu à fait comment ?