UI Layout: Simple Ways to Include Mobile Navigation Icons

More folks are actually surfing the Net using mobile devices at presents, thereby a few factors on sites need to be adapted to match those much smaller display measurements. This additionally consists of Web Navigating.

The icon listed below, if you may, is actually the most well-known symbol to stand for mobile phone menu/navigation.


Within this article, our company will take a look at several means to add the icon as well as which means is actually best.

Making use of Bitmap Picture

Every person knows ways to perform it by the Bitmap graphic. Our company could just make this symbol in Photoshop, wait to picture (perhaps in PNG or even JPG layout) and after that designate that through background-image in CSS.

Nevertheless, bitmap images are without scalability. In particular, when our experts must expand the picture, it could switch blurred or even pixelated. Along with the availabiity of high-resolution gadgets out there at presents, graphic scalability is one important variable you can’t afford to overlook.

Bootstrap Method

This is exactly how Bootstrap, a front-end progression framework, shows the navigation symbol in smaller sized display measurements. This uses three <span> factors:

<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 type=”button” training class=”btn btn-navbar” data-toggle=”collapse” data-target =”. nav-collapse” > Although the wanted icon could be actually achieved by means of designing, possessing added markup for only showing this tiny image is thought about redundant (particularly if our company abide to absolute best strategies).

Therefore, let’s locate a better way that require much less profit.

Using Font Image

An additional method to take is actually by using font symbols. Several fonts provide this image in their collection, such as Typeface Awesome as well as EnTypo. To display the image, our experts simply incorporate the respective character, as demonstrated in this message.

Some benefits from showing icon with font styles are that the image is actually very easy to modify by means of CSS and is actually resolution-independent. On the contrary, it additionally possesses some disadvantages: the data might be huge depending on the amount of characters are saved, as well as our team require at the very least 4 different data layouts to deal with internet browser compatibility which is a bunch of job to display simply one image.

Trigram for Paradise

Remarkably, there is actually an HTML personality called Trigram for Heaven. This is (possibly) the very best method I could locate. Basically this HTML personality (&#9776;&#9776;) as well as you must receive this icon on your webpage.


We could at that point change it with CSS, such as transforming the different colors or resizing it without shedding the sharpness and also linking to exterior sources. Additionally, you may study this collection to find even more HTML special personalities.