[Step by Step] Ajouter des icônes de menu WordPress à WordPress (2019)


Ajoutez des icônes de navigation / icônes de menu WordPress à votre site Web WordPress à l'aide de ce didacticiel simple et étape par étape, à la fois manuellement et à l'aide d'un plug-in.

Les icônes de menu WordPress peuvent instantanément laisser une bonne impression à votre public. Qui n'aime pas un site web attrayant? Depuis 2003, WordPress est derrière certains des les meilleurs et les sites exceptionnels. WordPress a conquis le coeur de développeurs, entreprises, et aussi les principales agences de presse. C’est pourquoi les agences de presse comme Reuters, BBC et d’autres grandes marques utilisent WordPress. En outre, de nombreuses réussites utilisent WordPress. en tant que magasin e-commerce ou en tant que marché. Vous pouvez ajouter Icône du menu WordPress pour rendre votre site web encore plus élégant.

Vous pouvez embellir votre site Web en ajoutant des icônes de menu WordPress à côté de chacun des menus de navigation. L'ajout d'icônes de menu de navigation peut toujours être une bonne idée pour augmenter l'engagement de l'utilisateur sur votre site. Les images de menu pour WordPress augmentent l'attrait visuel d'un site Web. Par exemple, regardez l'image ci-dessous. Est-ce que cela a l'air plus joli sur les yeux à cause des icônes de navigation?

images de menu de navigation
Un menu avec des icônes de navigation
menu de navigation sans icônes
Un menu sans icônes de navigation

Maintenant, regardez la deuxième image. Cela semble pâle comparé au premier.

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

Une image dit mille mots.

Comme dit le proverbe, vous pouvez ajouter des images pour augmenter l'engagement de l'utilisateur sur votre site Web. Il y a aussi quelques autres raisons à considérer.

  • Rendez votre site plus beau à regarder
  • Beaucoup de gens s'attendent à voir des icônes de menu WordPress
  • Fournit une bonne impression initiale
  • Peut exprimer les éléments du menu de navigation de manière plus amusante.
  • Les utilisateurs peuvent avoir une idée claire de la navigation sur le site du premier coup d'œil après avoir vu les icônes de menu WordPress.

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

L'ajout d'un menu de navigation peut être difficile ou confortable en même temps. Vous pouvez ajouter des icônes de menu de navigation sans utiliser de plugin et en utilisant des plugins. Nous allons décrire les deux manières, et vous pouvez choisir ce que vous voulez. Cependant, nous vous recommandons d’utiliser des plugins pour ajouter des icônes de menu de navigation à votre site Web WordPress.

Ajouter des icônes FontAwesome au menu de navigation dans WordPress (sans plugins)

Il est vrai que les icônes situées à côté du menu de navigation sont visuellement plus attrayantes. Les icônes visuelles à côté de chaque élément du menu de navigation confèrent au site une apparence premium et augmentent considérablement le facteur de confiance des utilisateurs. Si vous utilisez un thème gratuit, il se peut que vous ne disposiez pas de l'option intégrée pour ajouter des icônes de menu WordPress. Cependant, vous pouvez facilement ajouter des images de menu à la navigation.

Ajouter des icônes sans plugins

Il existe une bibliothèque de polices nommée Font Awesome où tous les différents types d'icônes sont disponibles gratuitement. Tout ce que vous avez à faire est d’ajouter les classes CSS après le chargement de la bibliothèque Font Awesome. Les icônes de menu WordPress appropriées apparaîtront à côté des options du menu de navigation.

[Step by Step] Ajouter des icônes de menu WordPress à WordPress (2019) 1

Étape 1: Chargement de la bibliothèque FontAwesome

Il existe de nombreux plugins pour le faire, mais comme nous écrivons cette section sans utiliser de plugins, nous devrons éditer le fichier de thème functions.php de WordPress. (NON RECOMMANDÉ). La modification de functions.php peut nuire à votre site Web si vous ne faites pas attention. Ce processus s'adresse uniquement aux utilisateurs avancés qui savent ce qu'ils font.

  1. Aller à Apparence >> Editeur
    Icône du menu WordPress
  2. Ouvrez functions.php

Icônes de menu WordPress - icônes de navigation WordPress

  • Ajoutez le code suivant à votre functions.php après <? phpétiquette
    fonction 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');
    ?>

    Comme ça
    Icônes de menu WordPress

Le code permet de charger la bibliothèque de polices de FontAwesome sur votre site Web WordPress. Vous pouvez maintenant utiliser n’importe quelle icône de FontAwesome dans votre menu de navigation WordPress.

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

Nous avons chargé FontAwesome bibliothèque d'icônes sur notre site Web. Maintenant nous pouvons utiliser toutes les icônes de la collection d'icônes 4000+ de FontAwesome. Voici le clien de feuille de chaleur de FontAwesome où vous pouvez trouver les codes exacts dont vous avez besoin pour chacune des icônes.

[Step by Step] Ajouter des icônes de menu WordPress à WordPress (2019) 3

Pour la galerie: fa fa-lg fa-camera-retro
Pour les nouvelles: fa fa-lg fa-journal-o
Pour la maison: fa fa-lg fa-home
Pour le contact: fa fa-lg fa-envelope-o
Pour À propos de: fa fa-lg fa-info-circle

FA représente la classe principale, fa-lg représente de grandes icônes. Si vous voulez utiliser, l'icône de la maison ajouter fa fa-lg fa- préfixe puis utilisez le nom de l'icône tel qu'il apparaît sur la page de feuille de triche.

  1. Aller vers Apparence >> Menus et ouvrez les Options d’écran par le haut. Vérifiez les classes CSS.

[Step by Step] Ajouter des icônes de menu WordPress à WordPress (2019) 5

2. Ouvrez l'élément de menu de navigation auquel vous souhaitez ajouter des icônes. Ajoutez le code de l'icône FontAwesome.

[Step by Step] Ajouter des icônes de menu WordPress à WordPress (2019) 7

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

[L’alignementdevosicônespeutêtreerronéàcauseduCSSdevotrethèmeSivousnesavezpascommentcorrigerCSSveuillezsuivreladernièrepartiedumessageoùnousavonsutilisé[Youmayseeyouriconalignmentwrongbecauseofyourtheme’sCSSIfyoudonotknowhowtofixCSSpleasefollowthelaterpartofthepostwhereweusedplugins ajouter des icônes.]

Ajouter des icônes de menu / icônes de navigation dans WordPress à l'aide de plug-ins

Ajouter manuellement semblait un peu ennuyeux, non? Vous pouvez simplement utiliser des plugins pour ajouter facilement ces icônes. Si nous étions vous. Nous ajouterions des icônes aux menus WordPress en utilisant un plugin.

Recommandation du plugin: Icônes de menu par Themeisle

Icônes de menu par ThemeIsle

Pourquoi choisissons-nous des icônes de menu par Themeisle pour ajouter des icônes de menu de navigation WordPress?

Themeisle est un fournisseur de solutions WordPress populaire. Il y a des thèmes qui sont assez populaires et maintiennent la qualité. Menu Icons de Themeisle est un plugin de qualité qui fait bien son travail. C'est un plugin WordPress d'image de menu extrêmement bien construit. Le plugin peut également ajouter des icônes aux éléments du menu de navigation déroulant. Maintenant, vous pouvez créer Menu déroulant WordPress avec images facilement.

  • Le plugin fait bien son travail.
  • Extrêmement facile à installer
  • Proprement codé.

Étape 1: Installation des icônes de menu par Themeisle

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

Il suffit de chercher le nom Icônes de menu par ThemeIsle et installez le plugin puis activez-le.

icônes de menu par thème

Étape: 2 Affichage des icônes de menu WordPress dans la barre de menu de navigation

  1. D'abord, allez à Apparence >> Menus
  2. Deuxièmement, choisissez la page sur laquelle vous voulez afficher les icônes et ouvrez l’élément de menu.
  3. Vous trouverez une nouvelle option de nommage "Icône: Sélectionner". Cliquez sur cette option.

icônes de menu par themeisle - Icône de menu WordPress

4. Vous verrez beaucoup plus d'icônes ici et vous pouvez choisir différents paramètres pour chaque icône. Choisissez simplement votre icône préférée et appuyez sur Enregistrez et vous avez terminé.

Icône de menu WordPress - icônes de menu themeisle

5. Lorsque vous visiterez votre site Web, vous pourrez voir les images du menu de navigation comme vous le voudriez.

images de menu de navigation

Résumé sur les icônes du menu WordPress

Vous pouvez facilement ajouter des icônes de menu WordPress en utilisant notre processus. Il peut y avoir d'autres plugins offrant le même service. Si vous pensez que nous avons manqué un bon plugin, laissez un commentaire et faites-le nous savoir.

C’est aussi une bonne idée de ajoutez une boîte d'auteur en-dessous de votre contenu. Si vous êtes préoccupé par la sécurité de WordPress, suivez notre Guide de sécurité WordPress pour des conseils de sécurité approfondis.

[2018] WordPress Security 101: Le guide de sécurité définitif pour WordPress

Suivez-nous sur Facebook et Gazouillement pour plus tutoriels conviviaux pour débutants et avis.





Source

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

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