如何通过class（纯CSS）切换字体真棒图标

Question

我正在做一个小项目，该项目将有一个 light/dark 模式切换，但我正在努力切换标签上的 class。

所以我为图标使用了很棒的字体这是我的代码：

HTML:

<i class="fas fa-moon" id="toggle"></i>

JS:

    function classToggle() {
        document.getElementById("toggle").classList.toggle('fas fa-moon');
        document.getElementById("toggle").classList.toggle('fas fa-sun');
    }

    document.querySelector('#toggle').addEventListener('click', classToggle);

上面的代码给我报错：

InvalidCharacterError: The string contains invalid characters.

JS我也试过：

    function classToggle() {
        this.classList.toggle('fas fa-moon');
        this.classList.toggle('fas fa-sun');
    }

    document.querySelector('#toggle').addEventListener('click', classToggle);

但这也不起作用并给我错误：

TypeError: undefined is not an object (evaluating 'this.classList.toggle')

我从 https://codepen.io/jacknifey/pen/XWJaKZr 那里得到了上面的代码并且它工作得很好，但是当我将 class 名称更改为很棒的字体后它就停止工作了。也许这与 SVG 相关。如果是这样，谁能建议一种替代方法。

保持安全谢谢，杰米 :)

Answer 1

您不需要将 fas 放入 classList.toggle 方法。

function classToggle() {
  document.getElementById("toggle").classList.toggle('fa-moon');
  document.getElementById("toggle").classList.toggle('fa-sun');
}

document.querySelector('#toggle').addEventListener('click', classToggle);

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<i class="fas fa-moon" id="toggle"></i>

如何通过class（纯CSS）切换字体真棒图标

How to toggle font awesome icon via class (pure CSS)

html

javascript

css

font-awesome-5