在哪里可以找到网页的“3 条水平线”符号？

Question

我想知道如何在我的网页上获得这个符号：

这个符号叫什么？有没有办法在我的网页上获取它，就像使用

获取 ▾ 一样

&#9662;

提前谢谢你。

Answer 1

link in comment中提供的所有方法都很棒。但还有一种方法没有描述，与 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 2

这是一个so-called"hamburger menu"。

你能得到的最接近的HTML实体是≡，粗体≡≡或&equiv;，supported almost everywhere。

还有☰☰,不过是less supported, in particular it is .

一个小图标就够了，如果你需要一个更大的图标，这里是一个纯粹的CSS实现：

.ham-menu { display: inline-block; position: relative; margin: 35px 0; } /* margin = (width-height)/2 */
.ham-menu, .ham-menu::before, .ham-menu::after { width: 100px; height: 20px; border-radius: 7px; background-color: black; }
.ham-menu::before, .ham-menu::after { content: ""; display: block; position: absolute; }
.ham-menu::before { bottom: 130%; } .ham-menu::after { top: 130%; }

<span class="ham-menu"></span>

Answer 3

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

或者只复制并粘贴这个简单的符号：☰

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 select 使用类

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

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

在哪里可以找到网页的“3 条水平线”符号？

Where do I get a "3 horizontal lines" symbol for my webpage?

html

css

hamburger-menu