The icons are great components to improve your website design. But how can we add the icons in wordpress menu is another problem.

You can add the icon when design your template buy using CSS, but the problem is you cannot control your icon when you add more menu items. It must depend on the number of your menu item. Normally, using this way, you must brainstorm your website menu, think what it has before making the web.

The good news is we already had another way, using a plugin call menu icon . This is the most easiest way to show icon in wordpress menu.

1. Getting started.

Download and Activate the menu icon plugin in your website.

2. Add Icons

In this example, I use the Twenty Thirteen, one of the default wordpress template .  Create or edit a menu from Apperance -> Menu

To add the icon for each menu item, let’s expand the menu item. You will find the link icon: select

Click in select you will see a popup window with a lot of available icons.

At this time, there are 4 libraries of icon name Dashicons, Elusive, Font Awesome and Genericons , you can also choose image and upload it to use as the icon. On the right side of the popup window, you will see a full settings of the icon

When setting is done, click select and process to add icon for other item in the menus.

By default, these icons already have hover effects. You won’t disappointed when using this plugin.