Comment changer une icone Font Awesome quand on clique dessus ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-08-07 23:28:52
Thèmes : font-awesome - css - javascript
Question

Bonjour, Comment faire pour changer une icone Font Awesome quand on clique dessus ?

Réponse

Pour changer une icone Font Awesome quand on clique dessus, vous pouvez utiliser les fonctions JavaScript classList, remove et add.

  • La fonction classList permet de lister toutes les CLASS CSS d'une balise HTML.
  • La fonction remove permet de supprimer une CLASS CSS.
  • La fonction add permet d'ajouter une CLASS CSS.

Voici un exemple où a été utilisé la librairie Font Awesome pour l'affichage des icônes au format SVG :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment changer une icone Font Awesome quand on clique dessus ?</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
</head>
<body>
<button id="icone">
<i class="fas fa-volume-up"></i>
</button>
<script>
var bouton = document.querySelector("#icone");
var icone = document.querySelector("#icone > i");
bouton.addEventListener("click", () => {
  if (icone.className === 'fas fa-volume-up') {
icone.classList.remove('fa-volume-up');
icone.classList.add('fa-volume-mute');
  } else {
icone.classList.remove('fa-volume-mute');
icone.classList.add('fa-volume-up');
  }
});
</script>
</body>
</html>

Démo dans le Bac à Codes.