How to Add Custom Icons to Your Navigation Menu?

It's always good to make your designs user friendly! When your design is intuitive, it guides your user towards the right path all the while. Navigation menus are one of the most intuitive areas of your design. You need to make sure the menus talk for themselves. Adding custom icons to your navigation menu will make the user understand where the tab will take them. Visual cues are an interesting way to guide your users. Let's see how you can add custom icons to your navigation menus without using plug-ins to direct you. Well, the best part of this method is that you won't slow down your site with additional image files as you don't upload any image files to be used in this icon.

Create the Child Theme

Let's say you are working on the twenty fifteen wordpress theme. Now, create a child theme for this main theme. When you create a child theme for an existing theme, you can customize the theme without causing unnecessary changes to the main theme.

FontAwesome Library

Your next step would be to activate the fontawesome library which you will be using for custom icons. Font awesome is basically a library of all icons created with an icon font. Like with other tools, you don't need to add background images in case of this font library. Fontawesome basically uses CSS stylesheets adding a pseudo element to an icon class. When you do this, the pseudo element adds a special character to the element with an icon style. The output is an icon added before the element to which you have just added a CSS class.

Now, you know how fontawesome works, so let's activate it.

Create a new file in the theme folder and name it functions.php. in case the theme folder has the functions.php file, paste the following code to the file.

<?php
function wmpudev_enqueue_icon_stylesheet() {
wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );
?>

It is important to understand what's happening here

First a function wmpudevenqueueiconstylesheet is created and the fontawesome stylesheet is registered to this function. Next, the enqueue code is used to queue up the stylesheet that has been registered. Finally, with the wpenqueue_scripts, Wordpress knows when to run the function and use the stylesheet.

Finally, you will need to save the functions.php file which contains your icons.

Add CSS to Menu

You have registered and activated fontawesome to the functions.php file of your child theme. Now, you can easily use the CSS classes within it to add the icons to the menu items.

Go to Appearance>Menu>Edit Navigation Menu

Here you can add CSS class to individual items within the navigation menu. Of course, you will need to perform a few steps before you can actually view them.

At the top of the screen, go to screen options and check the CSS classes. Now, you can start adding the icons to the individual elements.

For example,

fa fa-lg fa-home

fa: this is a code used for all the items that include font awesome icon

fa-lg: icon size set to large

fa-home: the icon that you want to display

Now, you can perform the same on the other items on the menu

When you are finished, save the menu icons with "Save Menu" button

Styling the Menu Icons

By just adding the icons to the menu items, you have processed the adding step. But, you need to make sure it appears nice along the frontend. That's why styling is important

You will need to now tweak the appearance of the menu items.

Let's begin. First step is to pull the menu items one over the other. Add the following code to the theme's stylesheet

.main-navigation ul li {
width: 100%;
}

With this, you can ensure that each menu item takes about 100% width of the containing element. Now, you will need to pull the icons to the left of the menu. Here's the code that will help you with this process.

.fa::before {
float: left;
}

Now, add a code to style the margin and width so that the menu looks a bit neat

.fa::before {
float: left;
margin-top: 8px;
width: 30px;
}

Finally, you will need to adjust the font for the text within the menu

.main-navigation ul li.fa.fa-lg a {
font-family: 'Noto Serif', serif;
font-size: 0.8em;
}

Let's take a look as to how the final stylesheet would look, so that your navigation menu with custom icons looks neat

/*
Theme Name: WPMU DEV Custom Navigation Menu Icons
Theme URI: http://rachelmccollin.co.uk/wpmudev-custom-menu-icons
Description: Theme to support WPMU DEV post on custom menu items
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk/
Template: twentyfifteen
Version: 1.0
*/

@import url("../twentyfifteen/style.css");

/* styling for menu icons */
.main-navigation ul li {
width: 100%;
}
.fa::before {
float: left;
margin-top: 8px;
width: 30px;
}
.main-navigation ul li.fa.fa-lg a {
font-family: 'Noto Serif', serif;
font-size: 0.8em;
}

With this custom icons added to the navigation menu, you are ready to give an ultimate experience to your users.

Conclusion When you add custom icons to your navigation menu, you are actually giving out an experiential interface to your users. An intuitive website offers better user engagement, and helps improve conversions. A custom icon is a great way to make your website look simple yet interactive.

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for hire wordpress expert then just get in touch with her.

Deepa Ranganathan
  • wordpress theme customization
  • wordpress development
By Deepa Ranganathan On 14 May, 15  Viewed: 211

Other blogs you may like

Code Hacks to Make your Website Theme Appealing

Wordpress has some amazing and highly powerful themes that you can use to improve the functionality and aesthetic appeal of your website. While, there are functionalities available with these themes, you will see that there is a huge possibility of customizing the theme with some interesting code... By Deepa Ranganathan   On 03 Jun 2015  Viewed: 196

Customize The Admin Post List in Wordpress Website

What do you see when you click on Admin post list in your Wordpress website? A list of all the posts created by you is displayed with their titles and dates. But, that's about it which is displayed! You won't be able to see any other details related to your post. So, if you want to display some... By Deepa Ranganathan   On 08 May 2015  Viewed: 458

Delightful WordPress Plugins That Augment Split Tests On WP Site

Keeping a check on your WordPress site's performance is a great way that helps make strives in the correct direction. Even a small tweak or change in the website can create a great difference in its performance. Thus, to ensure that your changes are offering breakthroughs and not introducing... By Edward John   On 26 Dec 2014  Viewed: 174

Creating Separate Page For Your WordPress Blog Posts

WordPress by default displays the blog content on the homepage. But, what if you want a separate page for your blog posts? Luckily, WordPress allows users to easily create a page particularly for blog posts. However, this process might seem challenging to most of the newbies. Reading this article... By Edward John   On 16 Dec 2014  Viewed: 212