如何在使用普通JS的按钮单击时，在字体上切换令人敬畏的图标？

Question

我创建了一个字体-令人敬畏的-条图标按钮，一旦点击将显示一个菜单。此外，我还希望字体-令人敬畏的-条图标被一个十字图标取代。我试着使用切换，但它不工作，控制台说不应该有空格字符。但如果我删除空格字符，该文档将无法读取字体可怕的图标。拜托，帮帮我。提前谢谢你。

<div class="hamburger-menu">
      <i class="fa-solid fa-bars"></i>
    </div>

const hamburgerMenuBtnContainer = document.querySelector('.hamburger-menu');
const hamburgerMenuBtn = document.querySelector('.hamburger-menu i');

hamburgerMenuBtnContainer.addEventListener('click', function(){
   hamburgerMenuBtn.classList.toggle('fa-solid fa-xmark');
});

Answer 1

​

const hamburgerMenuBtnContainer = document.querySelector('.hamburger-menu');
const hamburgerMenuBtn = document.querySelector('.hamburger-menu i');

hamburgerMenuBtnContainer.addEventListener('click', function() {
  hamburgerMenuBtn.classList.toggle('fa-xmark');
  hamburgerMenuBtn.classList.toggle('fa-bars');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="hamburger-menu">
  <i class="fa-solid fa-bars"></i>
</div>

​