Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Ajouter accueil Icône dans le menu de navigation WordPress

Màj le 5 juin 2014

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?

home-avveuil-iconeSuivez 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.

ajouter-home-icon

  • Sélectionner « classes CSS », comme indiqué dans l’image ci-dessus.
  • Maintenant Allez  dans Apparence> Menus.

home-icon-ajouter

  •  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.

 


Vous aimerez également...

  • Comment supprimer Post Meta et Post Info sous Wordpress
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • Thème enfant Twenty Fifteen (2015) avec barre latérale droite
  • Télécharger le thème Genesis Framework 3.3.5 gratuitement (dernière version)
  • Comment ajouter un ruban à votre blog Wordpress
  • 7 meilleurs thèmes WordPress gratuits 2022 (choisis par des experts)

Classé sous :Thèmes Balisé avec :wordpress design

Accueil / Thèmes / Ajouter accueil Icône dans le menu de navigation WordPress

Commentaires

  1. Rodriguez

    12 janvier 2018 à 10:41

    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.

  2. Rodriguez

    12 janvier 2018 à 11:04

    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 !!!

  3. billy

    8 mai 2018 à 12:58

    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

  4. wpcours

    10 mai 2018 à 10:27

    @billy j’ai pas bien compris ton message !

  5. Nicolas

    14 mai 2019 à 3:46

    Bonjour, je suis en local.
    J’ai télécharger mon logo et mit dans mes média, j’ai pris l’url, mais quand je le mets dans le CSS il me dit qu’il y a une erreur au niveau des : après le http, et quand je force la validation, ça ne marche pas non plus…
    une idée ?

  6. AmLo

    9 juin 2020 à 10:28

    Merci beaucoup pour ce tuto très simple et efficace. J’aimerais rajouter une option cliquable sur le logo, est-ce possible de faire cela? Je vous remercie d’avance pour votre réponse. Cdlmt

  7. wpcours

    9 juin 2020 à 10:48

    @Amlo j’ai pas bien compris ta question car le logo (home icone) est cliquable par défaut et redirige vers la page d’accueil de votre site.

  8. Youss

    21 décembre 2021 à 8:31

    Bonjour

    merci pour ce tuto !
    J’ai suivi les recommandations, mais l’icone apparait qu’à moitié devant le titre de la catégorie.
    Faut-il au préalable avoir une taille d’icone genre 32×32, 256×256,16×16…. ou peu importe la taille du png ?

    Parce que si de base la taille importe peu, alors mon souci se trouve ailleurs, peut etre dans les margin, width, eight… ?

    Je bosse sous DIVI, je ne connais pas la taille de la barre de menu, peut etre que le problème se trouve là (barre de menu trop petite par rapport à la taille du fichier ou pas assez large…) ?

    Une idée svp ?

    Merci
    Youss

  9. wpcours

    21 décembre 2021 à 11:28

    Salut Youss, vous pouvez régler ce problème en faisant des modifications sur ce code:

    width: 30px;
    height: 25px;
    margin: 5px 20px 0 10px;

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact