What is a fallback for the "hamburger icon" or HTML entity ☰?

Question

I have this as my menu bar for the site when viewed on tablet:

The menu icon on the right shows other options when clicked. The code is

<div id="menu">
  <a id="metaMenu" href="#">&#9776;</a>
</div>

But I saw on Twitter that the entity (or it may have been the corresponding Unicode characters) is not supported in some Android phones. How can I modify my HTML to have a fallback?

Answer 1

Image is a wrong way to go about this - as is an entity, in my opinion. As this one is not well supported at all. No Android, renders weird on Windows Chrome, Internet Explorer, etc.

Go the CSS3 route. This is supported by every major browser - and all modern mobile devices.

jsFiddle here: http://jsfiddle.net/328k7/

Use CSS3 as below. Edit where you see fit...

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 14px;
    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;
}