27802 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

(Je vais essayer de faire court) Sur WordPress, j'ai créé un menu avec Elementor. Comme je voulais une icône maison pour le bouton accueil, j'ai donc maintenant :
- Une icône maison
- Le libellé Accueil
En code HTML, voici ce que ça donne :

<li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-171 nav-item elementskit-mobile-builder-content active" data-vertical-menu="750px">
    <a href="http://wordpress" class="ekit-menu-nav-link active">
        <i class="ekit-menu-icon icon icon-home"></i>
            Accueil
    </a>
</li>

Via Elementor, je n'arrive pas à masquer le libellé. Je suis donc contraint de le faire en CSS.
Problème, je ne sais pas comment sélectionner/cibler uniquement le libellé Accueil pour le masquer.
J'ai essayé ceci :

#menu-item-171 a:not(#menu-item-171 a i.icon-home) {
	display: none;
}

Mais ça masque Et le libellé ET l'icône.
Comment faire pour ne sélectionner et ne masquer QUE le libellé ?

Merci par avance pour votre aide

Bonne journée Smiley cligne
Modérateur
Bonjour,

En fait , ce que tu veut cacher c'est le texte uniquement.

Plusieurs pistes avec des effets différents et parfois des reset à faire sur le i de l'icône.
* un text-indent négatif gigantesque et une icône flottante
* un font-size a zéro
* un color:transparent
* du display grid/inline-grid pour mettre le texte et l'icône dans la même case et cacher l'un avec l'autre
* de l'overflow accoler a grid ou text-indent

Enfin ton selecteur de base
#menu-item-171 a  { }

et si besoin d'un reset pour l’icône
#menu-item-171 a  i { }


Par exemple avec le font-size, cela donnerait :
#menu-item-171 a  { font-size:0}
#menu-item-171 a  i {font-size:1rem }



Cdt
Meilleure solution
Bonjour gcyrillus,

Merci beaucoup Smiley merci , ton dernier code CSS fonctionne très bien, super Smiley good !!
Effectivement, j'ai pas pensé mettre un font-size à 0.
Bonne astuce Smiley good

Bonne journée Smiley cligne