Unicode HTML ☰ not found in mobile web application menu in android chrome browser

Question

I have a problem in my website in Chrome browser Chrome Chrome which cannot show unicode ☰ . but if I test my web application on an iPhone or other browser for Android, it will render or work correctly.

I use this icon in this structure

<ul> <li>&#9776;☰</li> <li>Home</li> <li>About Us</li> </ul> 

But it does not appear in the browser of the Chrome mobile browser. How to fix it!

Answer 1

We can also create a hamburger / menu icon using some CSS and HTML that work fine on all versions of browsers without any interruptions.

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 for:

 <label class="hamburger-icon"> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> </label> 

Answer 2

Another alternative is to use ≡ instead: it looks very similar:

≡ instead of ☰

Answer 3

Apparently, the reason is that not a single font in the system where the browser is running contains a glyph for "☰" U + 2630 TRIGRAM FOR HEAVEN.

Alternatives:

• Use an image instead.
• Use a downloadable font with @font-face . This may mean that several megabytes must be loaded on the user system.

For general tips on these issues, see the Guide to Using Special Characters in HTML .