WordPress menu icons can add a nice design touch to your website. Whether you have a blog or a business website adding interesting design features can add to the user experience and increase visitor interaction.
Sometimes it can be difficult to add these types of features if you are inexperienced with WordPress and not sure where to start.
In this tutorial I will show you how to easily add WordPress menu icons to your site in just a few minutes.
What Are WordPress Menu Icons?
If you aren’t sure what a WordPress menu icon is then let me explain.
A WordPress menu icon is a small image that sits alongside the title on your website menu. This image adds an interesting design feature and helps to explain what each page is about.
This blog features menu icons. You can see them in the image below.
As you can see each page title has a small image next to it. The selected image represents what the page is about.
Now you know what a menu icon is we can look at how we add them to our site.
The first thing we have to do if we want to add menu icons is to decide how we are going to do it. The easiest method and the one that I use is by adding a plugin to your site.
Using a plugin makes it very easy to create and add menu icons.
You can add this plugin in the usual way by going to your WordPress dashboard and from the side menu select:
Plugins > Add New.
This will take you to the plugins page. In the search box type Menu Icons.
The first plugin that shows up should be the one we need. It is called Menu Icons by ThemeIsle. You can see what it looks like in the image below.
As you can see this is a very popular plugin with over 100,000 active installations.
Once you have found the plugin just click Install Now and once installed click Activate.
The plugin is now installed and ready to use.
Need the plugin now?
Click the button below to go straight to the plugin
Setting Up The Menu Icons Plugin
With the plugin installed and activated you can now start setting up your menu icons.
From your WordPress dashboard navigate to Appearance > Menus
Here you will find where your menus have been set up.
You now need to select your required menu (if you have more than one on your site). The image below shows how the main menu for this site looks in the menu set up area.
Your menu will have different titles but will look similar to this. As you can see, there is a drop down box arrow for each title. When you click on one of these it will look like the image below.
As you have the Menu Icon plugin installed you will see a title which reads – Icon: Select.
Click on this and you will be given some icon options to choose from. The page that appears will look something like the image below.
There is a choice of different icons from different sources such as Dashicons, Font Awesome and Genericons.
Once you have found the icon you require just select it and it will be added to your menu in the set up area as shown below.
You can now repeat this process for each title on your menu. Once you have finished click Save Menu in the top corner to ensure your menu is published correctly.
The menu icons should now be showing on your website.
You will also find tutorial videos on the ExploreWp Youtube channel.