Where do I get a "3 horizontal lines" symbol for my webpage?
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;
}
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>