UI Design: How to Add Mobile Navigation Icons

With the increasing use of mobile devices for internet browsing, it’s crucial to adapt website elements for smaller screens. One such element is Web Navigation.

The following icon is widely recognized as the symbol for “mobile menu/navigation”:

In this article, we’ll explore various methods to integrate this essential icon into your mobile interface.

Bitmap Image Approach

Bitmap images are a common method for adding icons. You can create the icon in Photoshop and then use the background-image property in CSS to display it.

However, bitmap images have limitations in scalability. When enlarged, they can become blurry, which is a concern given the prevalence of high-resolution devices.

The Bootstrap Method

Bootstrap, a popular front-end framework, uses three <span> elements to display the navigation icon on smaller screens:

 <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>

While this method achieves the desired look, it’s not efficient as it requires extra HTML markup.

Font Icon Technique

Font icons offer another alternative. Libraries like Font Awesome and EnTypo include this icon. Font icons are scalable and easy to modify with CSS, but they may require multiple file formats for browser compatibility.

Using “Trigram for Heaven”

An HTML character known as Trigram for Heaven can also be used. Simply add the HTML character (☰) to display the icon.

You can easily customize this character using CSS. For more options, you can explore this library of HTML special characters.