Discussion :

[goggi]

Bonjour,
Je me tourne vers vous après avoir bien bidouillé sans résultat...
J'ai un menu classique composé d'une liste boutons dans le texte desquels j'ai des icônes provenant de chez "font awsome".
Je veux que le texte du bouton soit cadré à gauche et l'icône à droite.
Voici mon HTML pour deux lignes de menu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li class="justl"><button id="menuOutils" class="hov" title="Outils">Outils <i class="fa-solid fa-screwdriver-wrench"></i></button></li>
<li class="justl"><button id="menuImprime" class="hov" title="Imprime">Imprime <i class="fa-solid fa-print"></i></button></li>

Le Css associé est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
button {
    color: maroon;
    background: white;
 
    &:hover {
          color: white;
          background: maroon;
    }
}
 
.fa-screwdriver-wrench,
.fa-print {
    float: right;
 
    &:hover {
          background: white;
    }
}
 
.justl {
    text-align: left;
 
    &:hover {
          background: white;
    }
}

Tout se passe comme je le souhaite sauf que, à l'événement hover, si le bouton et son texte s'inversent bien,
l'icône ne s'inverse pas et du coup, disparaît (SAUF si l'hover se produit au-dessus de l'icône).
En voici l'illustration, le curseur se trouve au-dessus du milieu du button imprime dont la couleur de l'icône
ne passe pas au blanc et du coup on a brun sur brun... :



J'ai essayé beaucoup de configurations, sans succès. Avez-vous une idée ?
Merci d'avoir pris le temps de me lire.
Goggi

[mathieu]

le code que vous appelez "css" n'en est pas.
utilisez vous un compilateur scss ou less ?

[goggi]

C'est du scss (sass)

[mathieu]

les effets que vous cherchez sont au survol du bouton, donc ça serait plutot quelque chose comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
button
{
	color: maroon;
	background: white;
 
	i
	{
		float: right;
	}
 
	&:hover
	{
		color : white;
		background : maroon;
	}
 
}

[goggi]

Merci, je vais l'essayer...

[mathieu]

je viens de modifier le code de mon message précédent.
dans le petit test que j'ai fait, les couleurs s'inversent bien pour le texte et l'icone avec ce code.

[mathieu]

et éventuellement pour définir les couleurs à un seul endroit, vous pouvez utilisez les variables avec scss comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$couleur_texte : maroon;
$couleur_fond : white;
 
 
button
{
	color : $couleur_texte;
	background : $couleur_fond;
 
	i
	{
		float: right;
	}
 
	&:hover
	{
		color : $couleur_fond;
		background : $couleur_texte;
	}
 
}

[goggi]

Merci pour votre aide.
En fait, comme ça ça me va :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
button {
        color: maroon;
        background: white;
 
        i {
          float: right;
        }
 
        &:hover {
          color: white;
          background: maroon;
 
          i {
            color: white;
            background: $color1;
          }
        }
      }

Sans le i dans le &:hover, l'icône apparaît bien, mais ses couleurs ne sont pas inversées.
Bien cordialement.
Goggi