Vous voulez remplacer le texte « accueil » ou « Home » dans votre barre de navigation par une belle icône ou une petite image pour ajouter un peu de « look » à votre blog? C’est ce que on va savoir dane ce tutoriel, vous allez apprendre comment ajouter cette icône facilement dans le menu de navigation de WordPress.
Comment ajouter accueil icône dans le menu de navigation de WordPress?
Suivez les étapes suivantes:
- Connectez-vous à votre tableau de bord de WordPress.
- Allez dans Apparence> Menus.
- Allez dans le menu « Options de l’écran » en haut à droite.
- Cliquez sur ce bouton et vous verrez cet écran.
- Sélectionner « classes CSS », comme indiqué dans l’image ci-dessus.
- Maintenant Allez dans Apparence> Menus.
- Dans la case « Classe CSS », ajoutez votre classe par exemple « home-icon »
- Maintenant allez dans apparence<Éditeur et ajoutez ces ligne à votre fichiers de style:
.home-icon {
background: url(Url-de-votre-image) no-repeat scroll left center transparent;
width: 30px;
height: 25px;
margin: 5px 20px 0 10px;
text-indent: -9999px;
}
Maintenant il ne reste que d’adapter ce code à votre thème.Mettez le lien direct de votre icône à la place de « Url-de-votre-image » . Si vous n’avez pas d’icônes voir ce site pour y télécharger une.
Rodriguez a écrit
Bonjour,
Bien voilà, j’ai un souci avec l’affichage de CSS Classes dans la partie menu après avoir coché sur l’option de l’écran mais rien n’apparait.
Je voulais exactement personnaliser mon texte ‘Accueil’ par l’icone maison. Malheureusement, l’élément ne s’affiche. Ceci avec le ‘liens personnalisés’ ou la ‘page’.
WordPress version 4.9.1 avec comme thème NativeChurch.
Je suis en localhost…
Merci d’avance de votre précieux tuto, espérant avoir une suite de votre part.
Rodriguez a écrit
Vous pouvez laisser, je viens de le trouvé mais avec un nom différent après avoir coché sur ‘Classes CSS’ il s’affiche avec le nom ‘titre Attribut’
Merci quand même !!!
billy a écrit
bonjour,
J’ai besoin de faire apparaitre l’icone de la maison en haute de mes autres pages à cote du titre afin que les gens n’ais pas à descendre en bas de la page pour trouver le menu, comment faut il faire, merci
wpcours a écrit
@billy j’ai pas bien compris ton message !