Icons of Font Awesome don't change

Question

I want to change the class 'fa-meh-blank' to 'fa-smile-wink' but it doesn't work.

When I flip the two classes, however, it works. I don't understand what's wrong, what would anyone have an idea?

const icone = document.querySelector("i");
console.log(icone);

//Je soumets

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  icone.classList.toggle('happy');
  icone.classList.toggle('fa-smile-wink');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>

Answer 1

I tried the 'fa-meh-blank' Remove. When I clicked it worked. And when I clicked again, my icon disappeared completely.

I managed to find the solution. I think I expressed myself badly. I wanted to alternate the icons with each click. The following javascript works perfectly.

My new JavaScript:

---

const icone = document.querySelector("i");
    console.log(icone);

    //Je soumets

    icone.addEventListener('click', function(){
  //console.log('icône cliqué');
  icone.classList.toggle('happy');
  icone.classList.toggle('fa-meh-blank');
  icone.classList.toggle('fa-smile-wink');
});

'
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>
`

Answer 2

const icone = document.querySelector("i");
console.log(icone);

//Je soumets

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  console.log('Before:', icone.classList);

  icone.classList.toggle('fa-meh-blank'); 
  icone.classList.toggle('fa-smile-wink'); 

  console.log('After:', icone.classList);
});

I think the code is working properly now. You forgot to delete the old class before adding the new one.

Answer 3

Your function is adding classes "happy" and "fa-smile-wink", rather than toggling between the classes which will change the icon. This is what I would do to toggle the icons, using vanilla JavaScript:

const icone = document.querySelector("i");

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  if (icone.classList.contains('fa-meh-blank')) {
    icone.classList.remove('fa-meh-blank');
    icone.classList.add('fa-smile-wink');
  } else {
    icone.classList.remove('fa-smile-wink');
    icone.classList.add('fa-meh-blank');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>