如何通過 class（純 CSS）切換字體真棒圖標

Question

我正在做一個小項目，該項目將有一個亮/暗模式切換，但我正在努力切換標簽上的 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：字符串包含無效字符。

對於 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（評估“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>