There are several ways to improve the design of your navigation menu. Among them, adding icons with your menu text could be an interesting idea. Along with upgrading the menu outlook, this will provide some hint about the content type as well.

Some WordPress themes come with dedicated icons for the custom menus. However, if your theme doesn’t have that feature or you want to add icons to all menu items, you need a more reliable solution. And that’s what I will show you today.

In this post, I will discuss two ways to add Font Awesome icons to your custom WordPress menus –

  • Adding Code and Doing it yourself,
  • Using plugins to add the icons.

#. Integrate Font Awesome With Coding

First of all, let’s start with the first method. The first step is to create a child theme. You need to do this so that you are not making any change to the original theme. This will also keep the icons when you update the original theme. If you don’t know how to create a child theme, here is a step-by-step tutorial to help you do that.

Integrating Font Awesome

Now that you have created a child theme, you are ready for the next step – integrating Font Awesome in your WordPress site.

To do that, open the functions.php file of your child theme. Paste the following code at the end of the file –

<?php function wpdean_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', 'wpdean_enqueue_icon_stylesheet' ); ?>

Save the file. This code will load the Font Awesome stylesheet into your site. Now you are ready to use the icons in your menu. However, before you start using the icons, you should know which icons are available.

Exploring Font Awesome Icons

To give you a short idea, Font Awesome is an extensive library of vector icons. You can change the color, size, drop shadow, etc. of these icons by applying CSS. Check out the available fonts on this page. Click on the icon you want to use. You will be taken to the icon page where you will find the icon code.

adding-font-awesome-icons-1

If you want to get more examples of various ways to use the images, you will find them here.

Using the Font Awesome Icons

Now, let’s see how to add these icons to our menu. Get to back to your website dashboard and go to Appearance -> Menus. If you haven’t created a primary menu yet, you should do it now.

Next, open the ‘Screen Options‘ section from the top. Check the ‘CSS Classes‘ box. This will display an additional box to provide custom classes for the menu items.

adding-font-awesome-icons-2

Now, click on a menu item. In the ‘CSS Classes‘ field, paste the following text –

fa fa-shows fa-home

You need to use these custom classes because –

  • Every Font Awesome icon needs the class ‘fa
  • You are setting the icon size with the ‘fa-lg‘ class
  • You are defining the particular icon by the ‘fa-home’ class

adding-font-awesome-icons-3

I have used the home icon as an example. You can use any icon you want. Just find out the icon code and paste them into the ‘CSS Classes’ field of the respective menu item. Once you have assigned the icons to each of your menu items, click ‘Save Menu.’

If you reload your website now, you should find out the icons in place. This is what I got.

adding-font-awesome-icons-4

I am using the Twenty Sixteen theme. If you are using any other theme, you might get a different look. However, regardless of which theme you are using, it is likely that you need to put some custom CSS to polish the look.

For my website, I want to put the menu text right after the icon and display the menu as a list. To do that, I will open the style.css file of my child theme. The first target is to display the menu as a list. This code should do it-

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

I saved the file, reload the site, and this is what I got as a result of the code.

adding-font-awesome-icons-5

As you can see, I have made some progress. But I still have a lot to do. Next, I want to make the icons and text appear on the same line. To do that, I will add the following codes –

.fa::before {
float: left;
}

Font Awesome displays icons by using them as pseudo elements. And this codes targets the pseudo elements of the fa class. This is the result of the code.

adding-font-awesome-icons-6

Now I need to apply some positioning code to display the menu entirely. The following code should do that.

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

This code will add some top margin and fix the icon width. Let’s check out the output of this code.

adding-font-awesome-icons-7

Yes, I have got it right. Just to make it perfect, I am going to restore the original fonts. This simple code will do the trick for me.

.main-navigation ul li.fa.fa-lg a {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 0.9em;
}

I saved the CSS file and reload the site. And here’s the final output –

adding-font-awesome-icons-8

If you are using another theme, you might have to target different selectors and apply different CSS code. If you are not confident about your coding skills, you can use a plugin to do that for you.

#. Applying Font Awesome by Using Plugins

There is another way to add Font Awesome icons in your WordPress menu. You can use WordPress plugins to do this job. Let’s see which plugins are available for this task.

1. Menu Icons

The Menu Icons plugin provides an easy way to add Font Awesome icons in your menu. Once you have installed and activated the plugin, go to Appearance -> Menus. You will find a new section titled ‘Menu Icons Settings’. Choose ‘Font Awesome‘ from in the Global field. The plugin also supports Dashicons, Elusive, Foundation, Genericons, image, and SVG icons.

Next, open a menu item. There will be a new option titled ‘icon’. Click the ‘Select‘ link to open the icons list. Choose an icon and define the display options.

adding-font-awesome-icons-9

You can choose to hide the label, set icon position, vertical alignment, font size, etc. The plugin also displays a preview as you change the display options.

2. AGP Font Awesome Collection

As you can guess from the name, this plugin allows you to use Font Awesome icons on your WordPress site. To use the plugin, install and activate it. At this point, you should have a new menu item titled ‘AGP Icons‘ in your admin menu. Go to AGP Icons -> Settings and check the ‘Menu Icons‘ box.

Now, head towards the Appearance -> Menus page. Click on any menu item, and you will find a new field titled ‘Menu Icon‘. Click on the area, and you will get a drop-down list of all the Font Awesome icons. As the icons are organized into different categories, you can easily find out the desired icons by checking out the relevant category.

adding-font-awesome-icons-10

Choose icons for your menu items and click ‘Save Menu‘. Then, reload your home page and enjoy the new icons along with your menu text.

3. Font Awesome 4 Menus

This is another popular plugin for displaying Font Awesome icons in your menu. Once you have installed and activated the plugin, go to Settings -> Font Awesome. On that page, choose ‘Official Font Awesome CDN …’ in the ‘Load Font Awesome 4 From‘ field. Click ‘Save Settings‘.

adding-font-awesome-icons-11

Unlike other plugins, this one doesn’t display the icons list. Instead, it allows you to choose the plugin from the Font Awesome directory. Choose which icon(s) you want to use and note down the class name(s).

Now, go to Appearance -> Menus. Pull down the ‘Screen Options‘ and check ‘CSS Classes‘. Finally, click on a menu item and provide the class name in the ‘CSS Classes‘ field. Click ‘Save Menu‘ and you are done. The icon will be displayed in front of the menu text.

So far, I have discussed the free plugins. Let’s take a look at a premium plugin now.

4. Iconize WordPress Plugin

Iconize is a premium WordPress plugin for adding custom icons into your menu, posts, pages, titles, widgets, etc. It supports all the standard icon fonts including Font Awesome, Genericons, Typicons, Foundations, Iconic, Fontelico, Entypo, etc.

When using the plugin, you can apply different styling like color, size, alignment, transformation, etc. without writing any code at all. Iconize will automatically put the icon in front of your menu name. As the plugin comes with RTL support, you can use this is in other languages as well.

Over to You

Adding icons to your menu is an interesting idea to make your website look cool. This article introduced you to various ways of doing that on your WordPress site. I have tried to make the process as simple as possible for you. However, if you still have any confusion about the process, let me know by leaving a comment below. I will be glad to help you.

How to Add Icons to Custom WordPress Menus Using Font Awesome?
5 (100%) 8 votes