html - 我的网页在哪里可以获得“3 条水平线”符号？

Question

我试图弄清楚如何在我的网页上获取此符号：

符号叫什么？有没有办法在我的网页上获取它，就像通过使用获取▾一样

▾

先感谢您。

Answer 1

Answer 2

评论链接中提供的所有方法都很棒。但也有一种方法没有在那里描述，与 bootstrap 使用的方法相同。这种方法的首选是因为它是纯 CSS 可动画的。

<div class="menu-icon">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>

.menu-icon > .line {
    background-color: #292929;
    height: 2px;
    display: block;
}
.menu-icon > .line + .line {
    margin-top: 8px;
}

Answer 3

您可以在此处找到 unicode 和 html 实体代码：https ://graphemica.com/%E2%98%B0

或者只是复制并粘贴这个简单的符号：☰</p>

Answer 4

你可以使用很棒的字体

<button class="btn"><i class="fa fa-bars"></i></button>

CSS部分

.btn {
    border: none;
    background-color: ghostwhite;
    color: black;
    font-size: 30px;
    cursor: pointer;
}

要在点击时展开，您可能需要一些使用类的 javascript 选择

const closeBtn = document.querySelector(".btn");
const sidenav = document.querySelector(".sidenav");
const closeSideNav = document.querySelector(".closeSideNav");

closeBtn.addEventListener("click", function() {
    sidenav.classList.remove("hidden");
});