Font Awesome 的图标不会改变

Question

我想将类“fa-meh-blank”更改为“fa-smile-wink”，但它不起作用。

然而，当我翻转两门课时，它就起作用了。我不明白出了什么问题，有人有什么想法吗？

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

谢谢您，您的评论帮助我找到了解决方案。我尝试了“fa-meh-blank”删除。当我点击它时，它起作用了。当我再次点击时，我的图标完全消失了。

我的新 JavaScript：

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