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 ThemeLet'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 LibraryYour 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.

<?phpfunction 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 wmpudev_enqueue_icon_stylesheet 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 wp_enqueue_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 MenuYou 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 IconsBy 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 IconsTheme URI: http://rachelmccollin.co.uk/wpmudev-custom-menu-iconsDescription: Theme to support WPMU DEV post on custom menu itemsAuthor: Rachel McCollinAuthor URI: http://rachelmccollin.co.uk/Template: twentyfifteenVersion: 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.

ConclusionWhen 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.

Original Source:http://www.wamda.com/deeparanganathan/2015/05/how-to-add-custom-icons-to-your-navigation-menu