Creating the Navicon without an icon

I’m a big fan creating “graphic-free websites”. My ultimate, yet somewhat lame goal in life is to create an entire website without using a single image file. I’m progressing towards that goal and CSS is helping me every step of the way.

One tip that I’ve discovered towards that goal is the creation of an image-free navicon. Navicons are becoming a universally recognizable substitution for complete navigation bars. However, if you are using an image for your navicon, you are essentially replacing a text-based navigation element with an element that requires another HTTP connection (an image), hence slowing down your page load.

The good news is that you can, and many have, created navicons without the use of images. There are two tricks that I like to use. I typically favor the first one as it is a little bit safer than relying on unicode characters.

The three-hyphen navicon

Believe it or not, I’ve actually created a much nicer looking navicon by rotating the lowercase letter “L” 90 degrees and placing three of them next to each other. But, we leaving IE 8 hanging as it doesn’t support CSS 3 transformations.

So, I typically settle on using three hyphens, with reduced line spacing to create the navicon effect. The CSS follows:

header ul:before { 
    content: '-\A-\A-'; 
    float: left; 
    width: 16px; 
    height: 16px; 
    font-size: 2rem; 
    color: #e7e7e7; 
    line-height: 3px;
    white-space: pre; 
    border: 1px solid #e7e7e7; 
    text-align: center; 
}
header ul:hover:before { 
    color: #fff; 
    border-color: #fff; 
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    header ul:before { height: 15px; padding-top: 1px; } 
}

This will not work in IE7 (as IE 7 does not support the :before pseudoselector). It also requires a slight adjustment for webkit-based browsers, hence the -webkit-min-device-pixel-ratio media query seen at the end.

Creating the navicon with a unicode character

After a few trips around the block with the CSS method, I started to wonder if there was a similar unicode character that might equally represent a navicon. I remembered back to one of my college math classes that there existed a symbol with three parallel lines. I completely forgot what it means, but after a quick Google, I came to the mathematical symbol for “Identical To”.

The Identical To character can be found as unicode character 0x2261: ≡

This is certainly a much simpler approach than using CSS, but I haven’t fully tested against all fonts, browsers and operating systems.

I imagine there are numerous other methods to build the navicon with HTML & CSS alone, so drop a comment if you have any other creative ideas!