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> </span> <span> </span> <span> </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.