Une Icone de font awesome dans le texte d'un button ne reagit pas au hover du button

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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

Pièce jointe 636778

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

04/04/2023, 10h30
mathieu

le code que vous appelez "css" n'en est pas.
utilisez vous un compilateur scss ou less ?
05/04/2023, 09h58
goggi

C'est du scss (sass)

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

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; } }

05/04/2023, 10h14
goggi

Merci, je vais l'essayer...
05/04/2023, 10h16
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.

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

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; } }

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

Code:

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