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

&#9662;

Thank you in advance.

That symbol is commonly referred as "hamburger button". There are quite a few ways to do it, as described in here: https://css-tricks.com/three-line-menu-navicon/ — Akatosh, Jan 09 '16 at 13:11
Animated ones http://tympanus.net/Tutorials/AnimatedMenuIcon/, https://codepen.io/kyleHenwood/pen/Alayb, http://codepen.io/designcouch/pen/Atyop, http://callmenick.com/_development/css-hamburger-menu-icons/ — Nenad Vracar, Jan 09 '16 at 13:18

user · Answer 1 · 2016-01-09T15:08:11.830

This is a so-called "hamburger menu".

The closest HTML entity you can get is ≡, bold ≡ ≡ or &equiv;, 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>

score 8 · Accepted Answer · answered Jan 09 '16 at 13:22

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

https://jsfiddle.net/znec584x/ small edit from Farzad's for those that come in the future. Thank you everyone! — INeedHelp, Jan 09 '16 at 13:32

score 4 · Answer 3 · edited Jun 24 '19 at 10:07

4

You can find the unicode & html entity codes here: https://graphemica.com/%E2%98%B0

Or just copy & paste this simple symbol: ☰

edited Jun 24 '19 at 10:07

nealio82

2,611
1
17
19

answered Jun 24 '19 at 08:59

John Lloyd Gonzales

41
1

score -2 · Answer 4 · edited Oct 27 '21 at 13:22

you can use font awesome

<button class="btn"><i class="fa fa-bars"></i></button>

the css part

.btn {
    border: none;
    background-color: ghostwhite;
    color: black;
    font-size: 30px;
    cursor: pointer;
}

to either expand on click you might need some javascript select using classes

const closeBtn = document.querySelector(".btn");
const sidenav = document.querySelector(".sidenav");
const closeSideNav = document.querySelector(".closeSideNav");

closeBtn.addEventListener("click", function() {
    sidenav.classList.remove("hidden");
});

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

4 Answers4