HTML unicode ☰ not detected in mobile web application menu in android chrome browser

The other alternative is to use ≡ instead: it looks very similar:

≡ instead of ☰


We can also create hamburger/menu icon using some CSS and HTML stuff that works fine on all versions of browsers without making any break. It works fine on all mobile and desktop browsers.

.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;
}
<label class="hamburger-icon">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
</label>


Apparently the reason is that no font in the system where the browser runs contains a glyph for “☰” U+2630 TRIGRAM FOR HEAVEN.

The alternatives are:

  • Use an image instead.
  • Use a downloadable font with @font-face. This may mean that a few megabytes need to be loaded in the user’s system.

For general advice on such matters, see my Guide to using special characters in HTML.

Tags:

Css

Unicode

Android

Google Chrome

Recent Posts