htmlcsshamburger-menu

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

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

symbol

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.

Solution

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