1. Rendez vous sur l’interface de gestion des menus et activez l’affichage des classes en cliquant sur les Options de l’écran.

menu_icons_1

2. Créez un item du menu pour la page d’accueil et attribuez lui la classe iconhome

menu_icons_2

3. Ajoutez le code CSS de votre icone du menu dans votre fichier style.css

.iconhome a{
   padding-left: 30px !important;
   background-image: url(images/home.png);
   background-position: center center;
   background-repeat: no-repeat;
}

 

Si vous souhaitez masquer le texte du menu et n’afficher que l’icône, ajoutez la ligne suivante:

text-indent: -9999px;

Votre code sera donc:

.iconhome a{
   background-image: url(images/home.png);
   background-position: center center;
   background-repeat: no-repeat;
   text-indent: -9999px;
}

 

Laisser un commentaire

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