How To Display Icons In WordPress Menu [WordPress Plugin]

The icon is a great complement to any type of design. Many icons are universally recognized. Take a public toilet signage at the airport. Without the need to know the local language, if it is foreign to you, you can immediately grasp which toilet is for the ladies, and which is for the gents from the icon used at the front of the door.

The same thing could also be applied for a Website; displaying an icon could help the users to navigate through your website. This helps with user experience, and will also make a website look prettier.

But displaying such an icon in a CMS like WordPress could be a challenge. If your website is built on top WordPress, here we will show you the easiest way to show an icon in WordPress menu.

Getting Started

Adding an icon in WordPress is made easy with a WordPress plugin called Menu Icons. First, install and activate this plugin.

Now we are ready to add the icons.

Adding Icon

For this example, I would like to use TwentyTwelve, a nice and clean WordPress theme. I also created a few pages that I will include in the menu.

Create a new menu through Appearance > Menus. Don’t forget to assign the menu location, unless it won’t appear anywhere in the website.

Then we will add an icon for each item. To begin, let’s expand one of the menu items. You will find a link that says Icon: Select icon. Click on the “Select icon” to start selecting. Here you will be presented with a window similar to the WordPress media library.

At the time of this writing, this plugin comes with 3 font icon libraries namely Dashicons, Genericons, and FontAwesome.

However, even though we are freely to use any icons, it is better to derive the icons from one library, since each of them has their own traits such as the size and the curve. In other words, if you use FontAwesome, use it throughout the website. Doing so would maintain the the icon consistency and make it look more unified.

When you select the icon, you will see the preview on the right panel. In the right panel make some adjustments. You can place the icon before or after the menu, control the font size, and set the vertical alignment. When the setting is done click on the Select, and proceed to add an icon for the other items in the menu.

Final Thought

Menu Icons is a very handy plugin to add icon in menu. It integrates well with the WordPress UI pattern which it very intuitive to use. In addition, the developer has planned a few new features for the next versions, including adding more icon libraries, and the ability to upload custom icon.

I hope you enjoy and find this tip useful. Go ahead and give the plugin a try.