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

Question

I'm trying to figure out how to get this symbol on my webpage:

What is the symbol called? Is there a way to get it on my webpage like there is to get the ▾ by using

▾

Thank you in advance.

Answer 1

This is a so-called "hamburger menu".

The closest HTML entity you can get is ≡, bold ≡ ≡ or ≡, supported almost everywhere.

There is also ☰ ☰, but it is less supported, in particular it is not available on Android.

It can be enough for a small icon, and if you need a bigger one, here is a pure CSS implementation:

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

All the ways provided in the link in comment are great. but there is also a way not described there, the same as bootstrap is using too. The preference of this method is because it is pure CSS animatable.

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