WordPress
time_read21mn de lecture

Comment ajouter des icônes dans le menu WordPress pour faciliter la navigation ?

14 janvier 2024

Comment ajouter des icônes dans le menu WordPress pour faciliter la navigation ?

 

Rendez votre menu WordPress plus intuitif et attrayant en ajoutant des icônes ! 🌟 Découvrez dans cet article comment ajouter des icônes dans le menu WordPress pour améliorer l’expérience utilisateur et faciliter la navigation. 🧭 Que ce soit pour des sites d’entreprise, des blogs ou des boutiques en ligne, apprenez les techniques pour ajouter des touches visuelles captivantes à vos menus. 💡🖱️

Objectif

Il est très facile d’ajouter des icônes dans le menu WordPress de votre site.😊

WordPress est un logiciel entièrement personnalisable et très facile à utiliser. Dans cet article, nous allons vous donner des détails sur la façon d’ajouter des icônes dans le menu WordPress en utilisant un plugin ou manuellement.🤗

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Prérequis

Pour suivre ce tutoriel, vous avez simplement besoin d’être connecté à l’espace d’administration de votre site avec les privilèges d’un administrateur.

Comment ajouter des icônes dans le menu WordPress ?

Les icônes peuvent rendre votre menu attrayant et améliorer l’expérience utilisateur sur cette section de votre site. Vous devez noter que les icônes peuvent être ajoutées à n’importe quel type de menus WordPress.

Ensuite, utilisez une des méthodes ci-dessous pour ajouter des icônes à votre menu.

Méthode 1 : utiliser un plugin pour ajouter des icônes au menu WordPress

Cette méthode est la plus simple et la plus rapide. Si vous débutez sur WordPress, vous pouvez utiliser cette méthode pour travailler efficacement. Notez que dans le référentiel de WordPress, vous avez une poignée de plugins populaires et faciles à utiliser pour ajouter des icônes à votre menu.

Voyons comment vous pouvez agir en utilisant un des plugins. Ensuite, nous vous donnerons quelques solutions alternatives.

Pour ce faire, connectez-vous à votre espace d’administration et accédez à la section « Extensions › ajouter ».

Ensuite, utilisez la barre de recherche et recherchez le plugin WP Menu Icons. Une fois que vous l’avez trouvé, cliquez sur le bouton « Installer maintenant ».installer le plugin WP Menus Icons Une fois que les processus d’installation et d’activation sont terminés, rendez-vous dans la section « Apparence › menus ». Ensuite, vous devez choisir une plateforme d’icônes à utiliser dans la partie gauche de votre écran.

Pour notre cas, nous avons choisi la plateforme Font Awesome Icons.Modifier le menu

La prochaine étape consiste à cliquer sur le bouton « Enregistrer ». Puis, vous devez choisir l’élément que vous souhaitez modifier parmi ceux qui sont ajoutés à votre menu.

Pour notre cas, nous allons développer l’élément « Boutique ». Ainsi, pour ajouter une icône, cliquez sur le bouton « + » placé à côté de l’élément à modifier.Appuyer sur le bouton + pour modifier un élément de menu Ensuite, choisissez une icône correspondant à l’élément de votre menu dans l’interface résultante. Rendez-vous dans la partie droite de votre interface et ajustez les options de l’icône. Pour notre cas, nous allons simplement changer la couleur de l’icône sélectionnée.

Pour terminer, cliquez sur le bouton « Enregistrer ».Choisir une icône à appliquer

Et voilà, l’icône configurée sera appliquée à l’élément du menu modifié.enregistrer les modifications

 

Enfin, vous devez cliquer sur le bouton « Enregistrer le menu » afin de publier vos modifications. Vous pouvez maintenant accéder à l’interface publique de votre site pour avoir l’aperçu de vos modifications.👇Prévisualisation de modifications du menu WordPress

Comme vous pouvez le voir, l’icône a été ajoutée avec succès. Et c’est plus simple à faire !

En dehors du plugin WP Menu Icons, deux autres solutions que vous pouvez utiliser sont notamment Menu Icons by ThemeIsle et Menu Image.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Méthode 2 : ajouter manuellement des icônes au menu WordPress

La deuxième méthode que vous pouvez utiliser est manuelle. Pour cela, vous allez ajouter du code CSS personnalisé aux fichiers d’installation de votre site. En plus, vous devez trouver des icônes à utiliser sur certaines bibliothèques d’accès libre en ligne, notamment Font Awesome, Elegant Icon Font, Foundation Icon Fonts, Elusive Icons.

Dans cet article, nous allons utiliser la bibliothèque Font Awesome afin de vous donner une idée de ce que vous devez faire en pratique.

Pour commencer, rendez-vous sur la page d’accueil de Font Awesome et cliquez sur le bouton « Start for free ». cliquer sur le bouton Start for freeEnsuite, entrez votre adresse e-mail dans la zone prévue et cliquez sur le bouton « Send kit code ».ajouter votre adresse e-mail Vous devez recevoir un e-mail avec un lien pour confirmer votre adresse e-mail. Une fois que vous avez terminé, vous serez redirigé vers l’interface qui contient votre code kit. Copiez-le dans en endroit sûr.copier le kit code Ensuite, connectez-vous à votre espace d’administration et accédez à la section « Apparence › éditeur de fichiers des thèmes ».éditeur de fichiers de thèmes

Ensuite, rendez-vous au fichier d’en-tête de votre thème (header.php) et collez votre code kit juste avant la ligne de code </head>.ajouter le code kit au fichier header.php

Enregistrez vos modifications et accédez à la bibliothèque des icônes de Font Awesome et trouvez l’icône que vous souhaitez utiliser.choisir une icône à utiliser

Cliquez sur l’icône à utiliser et copiez le code CSS fourni dans le tableau contextuel qui apparaît sur votre écran.copier le code CSS de l'icône Revenez dans votre tableau de bord et accédez à la section « Apparence › menus ». Apparence/menus

Choisissez l’élément du menu que vous souhaitez modifier.choisissez l'élément du menu à modifier

Ensuite, collez le code CSS de votre icône dans la zone « Titre de navigation » de l’élément en remplaçant le texte. Terminez votre configuration en cliquant sur le bouton « Enregistrer le menu ». ajouter des icônes dans le menu WordPress

Accédez à votre menu en direct pour vérifier vos changements. Et comme vous pouvez le voir, l’icône a été ajoutée avec succès.👇prévisualisation du menu

Besoin de créer une boutique en ligne rapide et sécurisée ?

LWS vous conseille sa formule d’hébergement e-commerce en promotion à -40% (offre à partir de 2,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Conclusion

🥳 Toutes nos félicitations pour avoir lu cet article. Comme vous pouvez le voir, il est plus simple d’ajouter des icônes dans le menu WordPress. Il vous suffit de choisir une méthode qui convient à vos besoins et de vous lancer dès aujourd’hui.

Si vous avez des questions sur la configuration des icônes de menu WordPress, utilisez la section Commentaires pour nous écrire.

Avatar de l'auteur

Auteur de l'article

Joseph

Bonjour, je m'appelle Joseph. Je suis rédacteur spécialisé dans WordPress, PrestaShop et d'autres CMS. Fort d'une expertise approfondie en PHP et MySQL, je partage mes connaissances à travers des tutoriels simples et accessibles. Passionné par le développement et la transmission de savoir, j'aime expliquer et rendre les concepts techniques compréhensibles pour tous

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (2)

CMH
25/07/2023 - 13:06
Karen
2023-07-25 15:06:07

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.