[Comment ajouter des icônes de menu WordPress (2024)

WordPress menu icons can instantly leave a great impression on your audience. Who doesn’t like a visually attractive website? Since 2003, WordPress has been behind some of the best and outstanding websites. It has won the hearts of developers, businesses, and also leading news agencies. Many news agencies like Reuters, BBC, and other big brands have been using WordPress. Numerous successful businesses use it as a platform to build eCommerce stores and marketplaces. By adding Icônes de menu WordPress, you can make your website even more elegant.

You can beautify your website by adding WordPress menu icons next to the navigation menus. This can help amplify user engagement by increasing the visual appeal of your website. For example, look at the picture below. Doesn’t it look nicer because of the navigation icons?

Maintenant, regardez la deuxième image. Elle semble pâle par rapport à la première.

Pourquoi ajouter des icônes de menu de navigation/des images de menu de navigation ?

Une image dit mille mots.

Comme le dit l'adage, vous pouvez ajouter des images pour augmenter l'engagement des utilisateurs sur votre site web. Il y a également d'autres raisons à prendre en compte.

• Rendez votre site web plus agréable à regarder
• De nombreuses personnes s'attendent à voir des icônes de menu WordPress
• Donne une bonne impression initiale
• Express the navigation menu items more playfully.
• Users can have a clear idea about site navigation at first glance

Comment ajouter des icônes de menu de navigation/des icônes de menu WordPress ?

Adding a navigation menu can be either hard or easy, depending on the method you follow. You can add WordPress menu icons either manually or using a plugin. We will describe both these methods so you can choose the method that best matches your skillset. But we recommend using a plugin because it’s more convenient.

Method One: Add Font Awesome Icons to Navigation Menu in WordPress (Without Plugins)

Adding icons next to WordPress navigation menus can make your website look more premium and boost the confidence factor massively of users. But if you use a free theme, you might not have the built-in option to add WordPress menu icons. However, there is still a way to do this.

There is a font library named Font Awesome where all the different types of icons are available to use for free. All you need to do is add the CSS classes after loading the Font Awesome library. Appropriate WordPress menu icons will show up beside the navigation menu options.

Step 1: Loading the Font Awesome Library

There are many plugins to do it, but as we are writing this section without using plugins, we will have to edit the functions.php theme file of  WordPress (NOT RECOMMENDED for beginners and non-advanced users).

Editing functions.php can harm your website if you are not careful. This process is only for advanced users who know what they are doing.

Aller à Appearance >> Editor.

Ouvrir functions.php.

Add the following code to your functions.php, after <?php

• function wmpudev_enqueue_icon_stylesheet() {
• wp_register_style( ‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.5.0/css/all.css’ );
• wp_enqueue_style( ‘fontawesome’);
• }
• add_action( ‘wp_enqueue_scripts’, ‘wmpudev_enqueue_icon_stylesheet’ );
• ?>

Remarque : As we already have many other codes on the editor, we haven’t included ?> into it. But if there is no other code on the page on your editor, you must add ?> at the end.

The code loads FontAwesome’s font library onto your WordPress website. Now, you can use any FontAwesome icons in your WordPress navigation menu.

Étape 2 : Ajout d'icônes FontAwesome aux menus de navigation

We have loaded the FontAwesome icon library to our website. Now, we can use any icons from the Collection de 4000+ icônes de FontAwesome. Voici le lien de l'antisèche de FontAwesome où vous trouverez les codes exacts dont vous avez besoin pour chacune des icônes.

For Gallery: fa fa-lg fa-camera-retro;

For News: fa fa-lg fa-newspaper-o;

For Home: fa fa-lg fa-home;

For Contact: fa fa-lg fa-envelope-o;

For About: fa fa-lg fa-info-circle

Où fa représente la classe principale, fa-lg stands for large icons. If you want to use it, the home icon adds fa fa-lg fa – a prefix and then uses the icon name as found on the cheat sheet page.

Naviguez jusqu'à Appearance >> Menus.

Open up Screen Options from the top. Check CSS Classes.

Open the Navigation Menu item where you want to add icons. Add the FontAwesome icon code.

Vous pourrez voir vos icônes à côté de votre menu de navigation comme suit 

[Il se peut que l'alignement de votre icône soit erroné à cause du CSS de votre thème. Si vous ne savez pas comment corriger le CSS, veuillez suivre la dernière partie de l'article où nous avons utilisé plugins pour ajouter des icônes].

Method Two: Add Menu Icons/Navigation Icons in WordPress using Plugins

Adding manually seemed a little bit boring, right? You can use a plugin to add these icons with ease. If we were you. We would add icons to WordPress menus using a plugin.

Recommandation de plugin : Icônes de menu par Themeisle

Icônes de menu par ThemeIsle

Pourquoi choisissons-nous Menu Icons by Themeisle pour ajouter des icônes de menu de navigation sur WordPress ?

Themeisle is a popular WordPress solution provider. It offers numerous themes and plugins that are already popular in the market due to their quality. Menu Icons by Themeisle is a quality plugin that does its job well and is an extremely well-built menu image WordPress plugin.

The plugin can add icons to dropdown navigation menu items. With this plugin, you can easily create WordPress dropdown menus with images.

• The plugin does its job well
• Extrêmement facile à installer
• Cleanly coded

Étape 1 : Installation de Menu Icons by Themeisle

Si vous ne savez toujours pas comment installer les plugins, suivez notre tutoriel sur l'installation des plugins.

Il suffit de rechercher le nom Menu Icons by ThemeIsle. Install the plugin and then activate it.

Étape : 2 Afficher les icônes du menu WordPress dans la barre de menu de navigation

Aller à Appearance >> Menus. Choose the page where you want to show icons and open the menu item.

Vous trouverez une nouvelle option nommée "Icône : Sélectionner". Cliquez sur cette option.

You will see a lot more icons here, and you can choose different settings for each icon. Simply pick your favorite icon and hit Sauvegardez et vous avez terminé.

When you visit your website, you will be able to see the nav menu images just as you would have wanted.

Conclusion sur les icônes de menu de WordPress

Vous pouvez facilement ajouter des icônes de menu WordPress en utilisant notre processus. Il peut y avoir d'autres plugins qui offrent la même possibilité. Si vous pensez que nous avons oublié un bon plugin, veuillez laisser un commentaire et nous le faire savoir.

Il est également judicieux de ajoutez une boîte d'auteur sous votre contenu. Si vous êtes préoccupé par la sécurité de WordPress, suivez notre WordPress Sécurité Guide pour des conseils de sécurité approfondis.

31+ Conseils de sécurité WordPress - Guide ultime de sécurité WordPress

Suivez-nous sur Facebook et Twitter pour plus d'informations des tutoriels adaptés aux débutants et revues.