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 un 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.
Principales fonctionnalités
Menu Icons s’intègre directement dans l’outil de conception de menus de WordPress sous Apparence puis Menus. Déroulez l’élément pour lequel vous souhaitez ajouter un icône puis cliquez sur Select. Si une telle option n’apparait pas, vérifiez dans l’onglet Options de l’écran situé en haut à droite de votre écran, que le bloc Menu Icons Settings est bien coché.
Une fenêtre modale apparait alors 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, Fontello) 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.
Taille : 1 000,0 Ko • Date : 26 juin 2016 • Hits : 1 411Une solution efficace, propre et pratique pour permettre à l’utilisateur final de modifier ses icônes de menus sans coder.
Maxime
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?
Aurélien Denis auteur de l’article
Comme indiqué dans l’article, il faut cocher dans Options de l’écran ce dont tu as besoin.
Maxime
C’est bon, je n’ai rien dit, j’ai trouvé la solution tout seul comme un grand!
kategriss
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) ?
Aurélien Denis auteur de l’article
Oui bien entendu, la méthode CSS reste valable bien qu’elle manque de souplesse.
Bouchart
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 ?
Geekroniques
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é!
Aurélien Denis auteur de l’article
Avec des balises dans le champ de titre ? Attention au code en sortie si c’est bien de cela dont il s’agit.
Geekroniques
Que veux-tu dire par là? Quel est le risque?
Aurélien Denis auteur de l’article
De se retrouver avec du code non désiré sur les éléments de titre… donc prudence.
Dom
bonjour,
avec le thème Divi, les icônes n’apparaissent tout simplement pas !
Aurélien Denis auteur de l’article
Voyez avec le support de Divi pour ce faire.