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

i have a issue in my website menu in android mobile chrome browser that is not able to show unicode ☰ . but if i am check my web application in iPhone or other android browser it is rendering or working properly.

I am used this icon in this structure

    <li>About Us</li>

But it is not show in mobile chrome browser How to fix it!


The other alternative is to use &#8801; 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.

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 {

and HTML for:

<label class="hamburger-icon">

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.

Need Your Help

shared test fixture for meteor velocity cucumber and jasmine

meteor meteor-velocity meteor-jasmine

How do I share a fixture between my cucumber and jasmine test?

How can I call an AMF service using Flex and get back an MP3?

php apache-flex actionscript-3 amf

My flex 3.5 application has an audio player whose content is accessed by calling an AMF service to get the mp3 data. As far as I can tell, is initialized with a URLRequest, so it'...