How To Add The Icons To Custom WordPress Menus Without Using Any Plugin

Navigation menus help users to find the information and browse through different sections of the website.

In the custom menu, we can add icons in the site’s navigation menu as it gives some visual effect related to content.

We can add the icons by using the font awesome library, we don't need to upload the images as it affects the site performance.We call the awesome library using functions.php file of the current theme.

Adding Menu Icons:

Activating Font Awesome

Then, we activate the Font Awesome library in your theme.

Font Awesome - It is a library of icons. It uses the CSS classes to add any custom style to it.

In your theme folder, open functions.php.

Add this code to the functions file to activate the font awesome:

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

In the above code, we created a function called wmpudev_enqueue_icons_stylesheet().

Inside that function, it uses wp_register_style(), which registers the Font Awesome stylesheet, it contains some external link.

To enqueue style we use wp_enqueue_style().

It uses the wp_enqueue_scripts action hook, which tells WordPress when to run the function.

Now save your functions.php file.

Adding CSS to the Menu Items

we can use the CSS classes provided by font awesome to add icons to our menu items.

In the WordPress Admin,
 Now Go To Appearance option in the sidebar of admin dashboard > Select Menus to edit the navigation menu.

WordPress allows you to add a CSS class to each item in your menu, but we can’t see the field for this by default: you need to switch it on first:

At the top of the screen, click the Screen Options tab.
Make sure the box next to ‘CSS Classes’ is checked.
Close the Screen Options tab.

Now save the menu with the help of Save Menu button.

Styling the Menu Items

To style your menu items, you can write CSS in stylesheet file of current theme

By, above mentioned way we can add icons to menu very easily.

Thanks.