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.

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

2. 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' );
?>

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

4. 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;
}

5. 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%;

6. }
.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.
Original Source:
http://www.wamda.com/deeparanganathan/2015/05/how-to-
add-custom-icons-to-your-navigation-menu

7. }
.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.
Original Source:
http://www.wamda.com/deeparanganathan/2015/05/how-to-
add-custom-icons-to-your-navigation-menu