html - 如何在不使用 JAVASCRIPT 的情况下更改 CSS 复选框标签图标

Question

我有一个没有 javascript 的汉堡包菜单(我不能使用它，那是作业)使用来自 FontAwesome 的标签图标，我希望在选中复选框时将图标更改为另一个，我只是不知道怎么做。我在网上查过，显然没有 JS 是不可能的，但我宁愿问以防万一。

图标直接位于使用 class 的标签内，我知道我可以根据需要添加任意数量的标签，它们会堆叠起来，但我不知道如何隐藏/根据复选框的状态或是否有其他方式显示其中一个:

<div id="hamburger">
    <img src="thelogo.png" alt="logo">
    <input type="checkbox" id="button">
    <label for="button" class="fas fa-bars"></label>
    <ul class="items">
        <li>EPISODES</li>
        <li>INTERVIEWS</li> 
        <li>ABOUT US</li>
    </ul>
</div>

Answer 1

您可以使用多个图标并显示/隐藏您想要的任何一个。

<input type="checkbox" id="button">
<label for="button" class="fas fa-bars"></label>
<label for="button" class="fas arrow-circle-up"></label>

#button:checked ~ .fa-bars {
   display: none;
}

#button:checked ~ .arrow-circle-up {
   display: inline-block;
}

或者更优雅的方式是更新图标代码的内容。

#button ~ label::before {
  content: '\f0c9'; // bars code
}

#button:checked ~ label::before {
  content: '\f0aa'; // arrow up code
}

Heres a cheatsheet of all the icon codes