如何將 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 ，而不是class屬性；)。 它可以以任何您喜歡的方式隱藏。

例子

 .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>