1. Home
  2. WordPress Tutorials
  3. How to Add Menu Icons in WordPress with ThemeIsle

How to Add Menu Icons in WordPress with ThemeIsle

Are you looking for a way to add menu icons in WordPress? Menu icons can spice up your website’s menus and make them look both appealing and professional. However, WordPress does not have a built-in way to add these, which is why you will need a plugin.

Today, I will demonstrate how to add menu icons in WordPress using the Menu Icons plugin by ThemeIsle.

Why Add Menu Icons In WordPress

Adding an icon to a menu item makes it easier for visitors to find what they are looking for. This plugin offers multiple icons to use from the start.

You can create icons for various websites including social media icons. Facebook, Twitter, Instagram and other graphics can all be created with ease. This makes it easier for visitors to share your content on their favorite social media platform.

However, the real utility is found in its custom icon creation feature. This is a menu image WordPress plugin, meaning that you can take images uploaded to your media library and use them as menu icons.

This gives you a limitless number of images to use. Just make sure they are properly sized.

The vast majority of professional websites utilize menu icons in their design. Thus, not using them can make your website look less professional.

Installing Menu Icons

Menu Icons by ThemeIsle is a WordPress menu button plugin with lots of customization options. It has hundreds of icons to choose from and the ability to use custom images as well. The plugin is very easy to use at any skill level.

Note: Although this plugin is made by ThemeIsle, you do not need to use one of their premium themes. This plugin should be compatible with the vast majority of themes available in WordPress.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Menu Icons by ThemeIsle in the available search box. This will pull up additional plugins that you may find helpful.

Menu Icons By ThemeIsle

Scroll down until you find the Menu Icons by ThemeIsle plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

On the left-hand admin panel click on Appearance and select the Menus option. This will pull up the menu settings page.

Click on Menus

Setting Up Menu Icons

Under the Add Menu Items section, you will see multiple ways to add items to your website’s menus. Click on the Menu Icon Settings option.

Menu Icon Settings

By default, only the Dashicons check box is selected. The options you select will allow you to use more icons in your menus. Dashicons contains basic icons while others contain less common ones.

While you are free to check all of the boxes, I recommend checking the Font Awesome and Image checkboxes. Font Awesome adds a lot of social media icon options and Image allows you to upload custom graphics.

Click on the “Save Settings” button when you are done.

Save Settings

By clicking on the Current Menus tab, you can edit the current settings in place. This is best done after you have added the icons. That way you can see what the changes will look like.

Adding Menu Icons

Click on the Custom Links option. Fill in the information for the desired link.

Custom Links

In this example, I will demonstrate how to create a Reddit icon, but you can repeat the following steps for any other website.

Simply enter the URL of the website you want to link to. In this case, I will use “https://www.reddit.com/”, but you can also use “https://www.Facebook.com/” and many others.

Next, add a link text. It is best to just use the name of the website, so in this case, I will use Reddit.

Click on the “Add to Menu” button.

Add to Menu

You should now see Reddit appear in your menu structure.

Now it is time to add icons to the menu item you created. Click on the menu item and select the Icons Select option.

Click on Select

If you followed my recommendation, you should see Dashicons, Font Awesome, and Image options on the left-hand side. While Reddit is extremely popular, it is still not a standard icon you would add.

For this reason, you will not find it in the Dashicons section. Instead, click on Font Awesome and locate the Reddit icon you want to use.

Locate Reddit Icon

Alternatively, you can click on Image and add your own custom icon, but you do need to make sure it is properly sized.

On the right-hand side, you will have some customization options available. How you choose to edit them is completely up to you.

Click on the “Select” button when you are done.

Select Button

You can now repeat these steps to add as many icons as you want. Click on the “Save Menu” button to finish.

Save Menu Button

Congratulations, you have successfully added menu icons in WordPress using the Menu Icons by ThemeIsle plugin.

The entire point of a menu is to help your visitors navigate your website and reach you on other platforms. For example, you can create a home option by using your home page as a custom link. Simply add a home icon to match it and you just made a stylish home menu item.

It’s easy to do and can make it easy for new visitors to find their way back. However, social media icons are becoming more critical for success over the years. They allow visitors to reach your brand on various platforms to follow or share with their friends.

Menu icons make it easier for visitors to find what they are looking for, so utilizing them is an obvious choice.

What types of menu items did you add icons for? Did you take the time to create and upload custom menu icons?

Author: Robert Giaquinto

Updated on July 2, 2019

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.