Comment ajouter des icônes (avec ou sans plugin) dans votre menu WordPress ?

Déc 2020 | Astuces, WordPress | 2 commentaires

Vous avez terminé votre menu mais vous souhaitez y ajouter des icônes. Malheureusement, l’ajout d’icônes devant les différents éléments qui composent votre menu n’est pas proposé nativement par WordPress (et c’est bien dommage). Devriez-vous renoncer à cette fonctionnalité pour autant ? Certainement pas : tout ce que WordPress ne fait pas, il est possible de l’ajouter par vous même ou, si vous n’êtes pas très à l’aise avec le développement, d’installer une extension qui se chargera de cela pour vous. Royal, non 😎 ?

À travers cet article, nous vous proposerons 3 méthodes pour ajouter en quelques minutes des icônes dans votre menu. La première sera l’ajout d’une icône provenant de font-awesome, la seconde vous permettra d’intégrer une icône qui vous appartient et nous vous conseillerons une extension prête à l’emploi en troisième solution. Vous n’avez plus qu’à faire votre choix !

Mais quel est l’intérêt d’agrémenter mon menu avec des icônes ?

Excellente question ! Comme explicité plus haut, WordPress ne propose que des éléments composés de texte concernant votre menu. Au delà de l’aspect esthétique ou de votre quête du design parfait, il est parfois intéressant d’ajouter une icône avant un item de votre menu pour lui permettre de simplifier l’expérience utilisateur grâce à la visibilité apportée par l’icône. En effet, votre visiteur identifiera d’un simple regard ce qu’il cherche dans votre menu. Si vous n’êtes pas convaincu, regardez bien ce qui suit :

Je suis prêt à parier que vous avez reconnu « l’accueil », « la recherche » et « le panier » en quelques secondes et sans le moindre texte. Pourquoi ? Car les normes du web ainsi que les habitudes prises par votre cerveau à associer pictogrammes et significations lorsque votre oeil balaye une interface vous permettent cette prouesse 😉

Vous l’aurez compris : ajouter une icône qui corrèle avec l’élément textuel de votre menu permet à votre visiteur une navigation intuitive. Attention toutefois à rester logique : n’ajoutez pas une banane à côté de votre élément « Boutique » (sauf si vous vendez des bananes 🤫) afin de ne pas perturber vos visiteurs.

Méthode numéro 1 : ajouter une icône font-awesome à votre menu

Font Awesome, c’est une bibliothèque composée de milliers d’icônes vectorielles (qui ne se déforment pas lorsque vous redimensionnez votre interface). En plus de contenir quasiment tout ce que vous souhaitez comme type d’icônes, cette immense base de données est en partie gratuite. Que demander de mieux ?

Pour utiliser font-awesome, la première étape est d’ajouter leur librairie en effectuant un simple import de leur feuille CSS. Rendez-vous dans votre CSS et ajoutez la ligne ci-dessous :

import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";

Une fois cette ligne ajoutée, sauvegardez votre CSS afin de charger la librairie au sein de votre environnement.

Maintenant, il va falloir définir les classes CSS des éléments de votre menu. Commencez par vous rendre dans le back-office WordPress de votre site puis naviguez vers « Apparence > Menus ». Une fois la page chargée, cliquez sur l’onglet « Options de l’écran » situé en haut à droite de votre interface : sous « Afficher les propriétés avancées du menu », cochez « Classes CSS ».

Ensuite rendez-vous dans la galerie de font-awesome puis cherchez une icône qui correspond à votre besoin. Enfin, copiez le code de l’icône puis collez-le dans l’emplacement « Classes CSS » (facultative) » de l’élément souhaité de votre menu.

Sauvegardez et… c’est tout, profitez du résultat ! Répétez la dernière opération sur les autres items si nécessaire afin d’habiller votre menu. Si vous rencontrez des problèmes, n’hésitez pas à parcourir la documentation fournie par l’équipe Font Awesome.

Méthode numéro 2 : ajouter votre propre icône à votre menu

Vous avez designé vos icônes et vous souhaitez les utiliser ? Pas de problèmes, c’est possible. Dans un premier temps, commencez par charger votre icône dans la bibliothèque de médias en cliquant sur « Medias > Bibliothèque ». Ensuite, cliquez sur le bouton « Ajouter » puis sélectionnez les icônes souhaitées avec le bouton « Sélectionnez des fichiers ».

Bibliothèque de médias

Une fois vos icônes chargées, cliquez sur une que vous souhaitez ajouter pour récupérer son adresse URL. A présent, dirigez-vous vers votre menu en suivant « Apparence > Menu »  et assurez-vous que l’option « Classes CSS » est activée (référez-vous à la méthode numéro 1 pour savoir comment faire si besoin 🙂).

Ajoutez ensuite l’URL précédemment récupérée dans le champ « Classes CSS (facultatives) » de l’élément souhaité de votre menu puis sauvegardez. Votre icône est ajoutée !

Méthode numéro 3 : utilisation de l’extension Menu Icons by Theme Isle

Si vous n’avez pas envie de mettre les mains dans le cambouis 🤯, vous pouvez choisir d’installer une extension qui fera le travail à votre place. Il en existe plusieurs dans la catalogue WordPress mais nous vous conseillons « Menu Icons (by Theme Isle) » qui est simple, rapide et gratuite. Si vous en utilisez déjà une, n’hésitez pas à nous la partager en commentaire.

Comme pour installer n’importe quelle extension, rendez-vous dans « Extensions > Ajouter » depuis votre back-office, recherchez « Menu Icons » et cliquez sur le bouton Installer. Activez ensuite l’extension.

Rendez-vous ensuite dans votre menu (Apparence > Menus) puis cliquez sur un des éléments composant ce dernier. Une nouvelle option nommée « Icons select » a été ajoutée : cliquez dessus afin de charger une fenêtre vous permettant de sélectionner une icône parmi la liste qui s’affiche. Sélectionnez votre icône, validez, sauvegardez et le tour est joué.

Mais finalement, quelle est la meilleure méthode à utiliser ?

Nous préférons privilégier le fait-maison afin de contrôler les actions menées et ne pas ralentir les sites en les surchargeant d’extensions mais vous n’avez pas à rougir d’en utiliser une car c’est rapide et tout aussi efficace. Peu importe la méthode choisie, votre menu WordPress est maintenant paré de ses plus beaux atours.

Et vous, de quelle manière rendez-vous votre navigation plus attractive ?

Par Samy Bentemam

Entrepreneur et rédacteur d’articles passionnants, je serais ravi d’échanger avec vous de votre futur projet. Au plaisir de partager de nouvelles connaissances tous ensemble 😸

Confiez votre projet web à des professionnels compétents

Laisser un commentaire

2 Commentaires

  1. Lucas

    Merci pour ce tutoriel 👍🏼

    Réponse
    • Samy Bentemam

      Je t’en prie, n’hésite pas à me montrer le résulat.

      Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Tu veux recevoir du contenu exclusif ?

Tu veux recevoir du contenu exclusif ?

Alors rejoins gratuitement la communauté Altefkat et bénéficie de nombreux avantages. Garanti sans spam, ni colorants, ni conservateurs !

Bienvenue dans la communauté Altefkat ! Nous te remercions pour ton inscription et ta confiance.

Hey, on s'occupe de votre maintenance WordPress ?

Remplissez le formulaire ci-dessous et notre équipe vous enverra une proposition gratuitement dans 48h. 

Votre message a été transmis 😺

Share This