html - 如何将 html 复选框变成图标

Question

我想仅使用 HTML 和 CSS，不使用 JavaScript。所以我放了一个 input type="checkbox" , 写 ul列出，让它变得漂亮漂亮，我就完成了。现在，我还必须至少使用一个 FontAwesome 图标，嘿，显然是每个人都使用的 3 个栏，而不是旧的丑陋的复选框，对吧？我以为我可以写 <label for="menu_button" class="fas fa-bars (the icon class)"></label>并完成它，但当然即使它在那里，它也没有做任何事情，而且......好吧，我不知道该怎么做。

.menu_items {
  max-height: 0px;
  font-family: "IBM Plex Mono";
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 28px;
  background-color: #0000EC;
  list-style-type: none;
}

.menu_button:checked~.menu_items {
  max-height: 224px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />

<div id="navbar">
  <img src="./images/logo.svg" alt="logo">
  <div class="hamburger-menu">
    <input type="checkbox" class="menu_button">
    <label for="menu_button" class="fas fa-bars"></label>
    <ul class="menu_items">
      <li href="#episodios">EPISODIOS</li>
      <li href="#nosotros">NOSOTROS</li>
      <li href="#entrevistas">ENTREVISTAS</li>
      <li href="#topicos">TÓPICOS</li>
    </ul>
  </div>
</div>

Answer 1

input 可以通过 id 和 for 属性链接到 label，而不是 类 属性；)。它可以随心所欲地隐藏起来。

例子

.menu_items {
  max-height: 0px;
  font-family: "IBM Plex Mono";
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 28px;
  background-color: #0000EC;
  list-style-type: none;
  transition:0.2s;
}

#burger:checked~.menu_items {
  max-height: 224px;
}
#burger {position:absolute;right:100vw;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />

<div id="navbar">
  <img src="./images/logo.svg" alt="logo">
  <div class="hamburger-menu">
    <input type="checkbox" class="menu_button" id="burger">
    <label for="burger" class="fas fa-bars"></label>
    <ul class="menu_items">
      <li href="#episodios">EPISODIOS</li>
      <li href="#nosotros">NOSOTROS</li>
      <li href="#entrevistas">ENTREVISTAS</li>
      <li href="#topicos">TÓPICOS</li>
    </ul>
  </div>
</div>