Two Simple Ways to Add Icons into a Menu in WordPress

Using images to support, even replace texts is excessively familiar to us. It is encouraged to use because of its aestheticism and denotation. So, you may feel that a text menu lacks interesting and exciting for users or you just need something shorter. The most common way is adding some icons to your menu.

Now, here are two simple ways to add icons into a menu in WordPress site. Let’s see how.

Method 1: Using CSS to Add Icons

Firstly, I must say that there are many types of icons designed and developed by different authors. A group of icons developed by an author is called a library, such as Dashicons, FontAwesome, Elusive, and Genericons. Each icon in each library has its own CSS code. So, you should use icons from only one library on your site. Mixing them all may get some error in the display.

Dashicons is a library from WordPress so it is built-in in all WordPress sites. So there is no need to activate it on your WordPress site. For the other libraries, you must add some code into the functions.php file in your theme to activate them.

Thus, for me, using Dashicons is really convenient then I chose it.

Step 1: Add CSS of the Icons into Items in the Menu

Go to the page of Dashicons and choose an icon, and copy its HTML code.

My icon has the HTML code: <span class="dashicons dashicons-heart"></span>.

Now, back to the admin dashboard on your WordPress website, go to the Appearance menu > Menus to create or edit your menus.

Choose a menu and one of its items. I chose the first one which has the navigation label named Home. Add the HTML code of the icon to its Navigation Label box:

Right after saving changes, my menu shows the icon before the Home item.

The icon’s position and size may not yet balance to the other elements, so you should edit it a little bit as the next step.

Step 2: Style the Icons Using CSS

On the homepage, click Customize to open Customizer. You also can open it from the admin dashboard by going to Appearance > Customize.

In the Customizer screen, choose Additional CSS in the left column.

Then, insert the following code to the blank area in the bottom left corner.

.main-navigation li a {
    display:flex;
    align-items: center;
}
.main-navigation li span {
    margin-right: 8px;
}

Your icon will be shown in the right way. If not, add further CSS code to fix it. Finally, press the Publish button to save all the changes.

You’ve finished adding an icon into a menu by CSS. If you’re not good at CSS, you may try the 2nd way which is using a plugin.

Method 2: Add Icon to Menu Using Plugin

There are several plugins that help to add icons and pictures as well to the menu in WordPress. One of them is Menu Icons by ThemeIsle has the most downloads. It is free and available in wordpress.org.

After activating the plugin on your site, go to the Appearance menu > Menus. You’ll see an additional text line “Icon: Select” in each item editing tab.

Press Select, then a popup appears and allows you to choose icons as well as configure the size, position, and other options.

Then, press Select and save the menu. Your new icon will show in the menu in the right way.

Final Words

As you see, I keep icons added in both ways but they display well at all. This is because the Menu Icons by ThemeIsle plugin use the Dashicons library too. I tested using both FontAwesome and Dashicons then got an error. So, please make sure that all the icons are from the same library.

Using icons is a good way to make your site more attractive, if you want to use icons more frequently for other elements, for example, icons in the title of custom fields, we already have a guide here for you.

I hope that this post can help you to make up your menu better. Good luck and keep track on my next posts!