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

INeedHelp picture INeedHelp · Jan 9, 2016 · Viewed 10.5k times · Source

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.

Answer

Farzad Yousefzadeh picture Farzad Yousefzadeh · Jan 9, 2016

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