J'ai rencontré ce problème css, j'utilise react et j'ai implémenté dans une page 2 icônes (WhatsApp et Facebook) et dans une autre page la même chose. J'utilise les classes fontawsome, le problème est que si je change le rapport hauteur / largeur, je change aussi automatiquement l'icône de l'autre page.

Première page: (js)

              <Btnwts buttonSize='btn3--wide' buttonColor='green'>
              <i class="fab fa-whatsapp"></i> <a href="https://wa.me/">{buttonLabel2}</a>
              </Btnwts>

              <Btnmsn buttonSize='btn4--wide' buttonColor='primary'>
              <i class="fab fa-facebook-messenger"></i> <a href="https://m.me                       
              /">{buttonLabel3}</a>
              </Btnmsn>

Deuxième page (js + css):

              <Link to={'//wa.me/'} target='_blank'>
              <i class="fab fa-whatsapp"></i>
              </Link>

              <Link to={'//m.me/'} target='_blank'>
              <i class="fab fa-facebook-messenger"></i>
              </Link>

Css:

.fa-whatsapp{
font-size: 3rem;
position: relative;
margin-left: 20px;
top: 8px;
color: rgb(26, 212, 26);
animation: verde 1s linear infinite ;
}

.fa-facebook-messenger{
font-size: 2.8rem;
position: relative;
margin-left: 20px;
top: 8px;
color: rgb(26, 107, 212);
animation: verde 1s linear infinite ;
}

Donc ma question est, comment puis-je changer le nom des classes d'icônes puisque si j'essaye de les changer, il ne reconnaîtra pas l'icône, merci!

0
Raffaele Scardamaglia 5 nov. 2020 à 19:13

2 réponses

Meilleure réponse

Vous pouvez ajouter autant de classes que vous le souhaitez à n'importe quel élément. Pour personnaliser l'une des icônes Font Awesome, vous pouvez simplement ajouter une autre classe après les classes existantes - chaque classe est séparée par un espace, de sorte que les icônes ont déjà deux classes - .fab et .fa-facebook-messenger.

<i class="fab fa-facebook-messenger my-class"></i>
0
DannyXCII 5 nov. 2020 à 16:21

Vous pouvez mettre le nom de la 3ème classe dans la classe de l'élément .. sur css ajoutez la nouvelle classe ci-dessous de ce que vous avez et ajoutez votre style (le dernier style remplacera le style ci-dessus)

0
Ayoob Nabwani 5 nov. 2020 à 16:18