Ajouter des icônes sur vos items de menus WordPress

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

wordpress-menu-icons-2wordpress-menu-icons-3  wordpress-menu-icons-2

Obtenir Menu Icons

Vous pouvez télécharger gratuitement cette extension depuis votre administration WordPress ou à partir du répertoire officiel via ce lien :

Menu Icons

Ajouter facilement des icônes dans vos menus de navigation.

Taille : 1 000,0 KiB  •  Date : 26 juin 2016 •  Hits : 97

Une solution efficace, propre et pratique pour permettre à l’utilisateur final de modifier ses icônes de menus sans coder.

10 commentaires

  1. 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?

  2. 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) ?

  3. 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 ?

  4. 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é!

Laisser un commentaire