Icone of font awesome dont change

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>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ggGT2N4l_08?si=hFk7Xzw16cEEzi6x" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>