December 10, 2015

How to Fix the Trigram / Hamburger / Three Lines / &#9776 Not Displaying in Android Issue

The character is often seen everywhere especially with a mobile device as the de-facto representation of a hidden menu. Commonly called the trigram for heaven, the hamburger icon, or simply the three lines or three bars icon.

If you are using &#9776 to display the unicode character, I have a bad news for you. It wouldn’t display on Android.


The reason?

The character denoted by ☰ does not appear in Android fonts, and its font coverage is relatively limited in other environments, too.

Source: StackOverflow

So since it’s not part of the fonts used in Android, Android is not able to find the right symbol to display when rendering this unicode character.


The Solutions

Solution 1: Font Awesome

The easiest work around would be use Font Awesome. They have a bars icon which you can use to replace the html code &9776.

<i class="fa fa-bars"></i>

Most of us are already using Font Awesome in our web projects so this would probably not be an issue.

Solution 2: Use image as a replacement

If you are not using Font Awesome and do not intend to use it, you may use an image to replace it.

<img src="http://www.fileformat.info/info/unicode/char/2630/trigram_for_heaven.png">

Probably not a good idea to hotlink directly from fileformat.info, so download it to your server and use it from there.

Solution 3: Create the bars with CSS3

Alternatively, you can use CSS3 to create the bars as a replacement.

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 16px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}

More details

More details can be found in this StackOverflow thread.

***

Hello! My name is Jian Jye and I work on Laravel projects as my main job. If my article was helpful to you, a shoutout on Twitter would be awesome! I'm also available for hire if you need any help with Laravel. Contact me.