如何在不使用 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

要在选中复选框时更改标签图标，请使用:before伪元素。

例子

JsFiddle

html

<input type="checkbox" id="button">
<label for="button" class="fas"></label>

CSS

#button {
  display: none;
}

#button + label:before {
  content: "\f0c9"; 
}

#button:checked + label:before {
  content: "\f0aa"; 
}