{"id":2037,"date":"2014-01-28T21:23:00","date_gmt":"2014-01-28T21:23:00","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=2037"},"modified":"2014-01-28T21:35:36","modified_gmt":"2014-01-28T21:35:36","slug":"creating-navicon-icon","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/creating-navicon-icon\/","title":{"rendered":"Creating the Navicon without an icon"},"content":{"rendered":"

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.<\/p>\n

One tip that I’ve discovered towards that goal is the creation of an image-free navicon<\/a>. 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.<\/p>\n

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.<\/p>\n

The three-hyphen navicon<\/h3>\n

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.<\/p>\n

So, I typically settle on using three hyphens, with reduced line spacing to create the navicon effect. The CSS follows:<\/p>\n

header ul:before { \r\n    content: '-\\A-\\A-'; \r\n    float: left; \r\n    width: 16px; \r\n    height: 16px; \r\n    font-size: 2rem; \r\n    color: #e7e7e7; \r\n    line-height: 3px;\r\n    white-space: pre; \r\n    border: 1px solid #e7e7e7; \r\n    text-align: center; \r\n}\r\nheader ul:hover:before { \r\n    color: #fff; \r\n    border-color: #fff; \r\n}\r\n@media screen and (-webkit-min-device-pixel-ratio:0) { \r\n    header ul:before { height: 15px; padding-top: 1px; } \r\n}<\/code><\/pre>\n
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.<\/p>\n
Creating the navicon with a unicode character<\/h3>\n
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”.<\/p>\n
The Identical To character can be found as unicode character 0x2261<\/a>: \u2261<\/p>\n
This is certainly a much simpler approach than using CSS, but I haven’t fully tested against all fonts, browsers and operating systems.<\/p>\n
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!<\/p>\n","protected":false},"excerpt":{"rendered":"
The navicon is almost universally recognizable as a hover-for-navigation element, but it requires another image be loaded, unless you are clever about implementing it.<\/p>\n","protected":false},"author":1,"featured_media":2121,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[151,128],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2037"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=2037"}],"version-history":[{"count":11,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2037\/revisions"}],"predecessor-version":[{"id":2126,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2037\/revisions\/2126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/2121"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=2037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=2037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=2037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}