The mobile menu icon I use does not display some browsers on some tablets that my family owns.
<label class="menumobile" for="bt_menu">☰</label>
CSS
label.menumobile{
float: left;
width: 100%;
color:#fff;
min-height: auto;
background-color: #FF8922;
box-sizing: border-box;
}
label[for="bt_menu"]{
padding: 5px;
background-color:#FF8922;
color:#fff;
text-align: center;
font-size: 30px;
cursor: pointer;
width: 50px;
height: 50px;
box-sizing: border-box;
}
Apparently, the reason is that no source on the system where the browser running contains the encoding for "☰"
The alternatives are:
@font-face . This may mean that
some megabytes need to be uploaded to the user's system. Try to use ≡ instead of ☰ , they are similar.
We can also create a hamburger / menu icon using a few CSS and HTML things that work well on all browser versions without making any breaks.
CSS for icons like:
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
And HTML:
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label>
Running example: jsfiddle.net
A small complement for response from above. You could font-awesome , it is light, fast and free.