All Ping

More people are surfing the Internet via mobile devices these days, thus a few things on websites need to be adjusted to fit in those smaller screen sizes. This also includes Web Navigation.

The icon below, if you may, is the most popular icon to represent “mobile menu/navigation”.

In this post, we’ll take a look at several ways to add the icon and which way is easiest.

Using Bitmap Image

Everyone knows how to do it by way of the Bitmap image. We can simply create this icon in Photoshop, save it to image (probably in PNG or JPG format) and then assign it throughbackground-image in CSS.

However, bitmap images lack scalability. In particular, when we have to enlarge the image, it may turn blurry or pixelated. With the availabiity of high-resolution devices in the market these days, image scalability is one essential factor you can’t afford to overlook.

Bootstrap Way

This is how Bootstrap, a front-end development framework, displays the “navigation icon” in smaller screen sizes. It uses three <span> elements:

Although the desired icon may be achieved through styling, having extra markup for only displaying this tiny icon is considered redundant (especially if we comply to “best practices”).

So, let’s find a better way that require less markup

.

Using Font Icon

Another way to take is by using font icons. Several fonts provide this icon in their set, such as Font Awesome and EnTypo. To display the icon, we simply add the respective character, as demonstrated in this post.

Some advantages of displaying icon with fonts are that the icon is easy to alter through CSS and is resolution-independent. On the other hand, it also has some disadvantages: the file could be very large depending on how many characters are saved, and we need at least four different file formats to cover browser compatibility which is a lot of work to display just one icon.

“Trigram For Heaven”

Surprisingly, there is an HTML character called Trigram for Heaven. This is (probably) the best way I can find. Simply put this HTML character (&#9776;) and you should get this icon on your webpage.

We can then alter it with CSS, such as changing the color or resizing it without losing the sharpness and also linking to external sources. Furthermore, you can dive into this library to find more HTML special characters.