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

Question

我正在试图找出如何在我的网页上获取此符号：

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

获取▾

▾

提前谢谢。

Answer 1

这是一个所谓的＆＃34;汉堡包菜单＆＃34;。

您可以获得的最接近的HTML实体是≡，粗体≡ ≡或≡，supported almost everywhere。

还有☰☰，但它是less supported，特别是not available on Android。

对于一个小图标来说就足够了，如果你需要一个更大的图标，这里有一个纯粹的CSS实现：

＆＃13;

＆＃13;

.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%; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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 3

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

或者只是复制并粘贴以下简单符号：☰