How to Add Custom Icons in your WordPress Menu? (Step by Step Guide)

There are several ways to improve the designs of your navigation menu. Among them, adding icons to your menu items could be an interesting one. Along with the upgrade on the menu outlook, the icons on the menu items will provide more hint to your visitors about the page before visiting it.

If you are a WordPress user, then are various free and premium WordPress themes that contain inbuilt icons set for your menu. However, if the template you are using for your WordPress website does not contain that feature or have a limited number of icons then, using the WordPress custom icons plugin for adding the menu icons is the most reliable option.

Here in this article, we will be using WP Menu Icons plugin to show you a step by step tutorial to add some beautiful and attractive icons to your menu items.

Brief Introduction: WP Menu Icons

WP Menu Icons is a premium WordPress plugin by AccessPress Themes. It consists of a wide range icon packs for adding some eye-catching icons for your site’s navigation menu. Moreover, the plugin also has different customization options to customize the icons for displaying it beautifully on your WP menu.

Some of the Major Features of WP Menu Icons

• 10 Pre-Designed Attractive Font Icons
• Option to Add your Own Custom Icon Sets
• 15+ Hover Over Animations
• Custom Styling Option for Each Icon
• 3 Different Position to Display your Icons
• Compatible with All Types of WordPress Templates

Full Features and Details of WP Menu Icons

Installation and Activation

Get a copy of WP Menu Icons plugin from CodeCanyon marketplace at the reasonable price of $10. After, you purchase the plugin, install and activate it. If there is any problem while installing the plugin, you can take the help of the documentation.

Also, if you are a newbie and need a help in installing the plugin then, you can go through our article: How to install a new plugin in WordPress website?

Add Custom Icons in your WordPress Menu

After you activate the plugin, go to Appearance > Menus. There, you will see WP Menu Setting Section. Enable it to start adding the custom icons on your navigation menu.

Then, hover on any of the menu items. You will see Add Menu Icon button appear on the menu items. Click on any of it to start assigning the icons.

After clicking on the button, you will see a popup called WP Menu Icon Settings appear on your screen. The popup consists of 4 settings sections that you need to configure for adding the menu icons. The settings are:

General Settings

From the general settings section, you can enable/disable the menu icons for desktop, tablet, and mobile. Configure it as per your preference to display the icons. Also, set the position where you want to display your custom icons on your navigation menu.

Icon Settings

The icon settings will allow you to choose the icons for your navigation menu. Select the most suitable icons either from 10+ readymade font icons that are provided the plugin or upload your own custom icons.

Animation Settings

From the animation settings, you can add animation effects and hover effects for the icon set of your menu. The plugin consists of 15+ cool animations effects. So, choose the most attractive one for your menu icons.

Custom Settings

The custom setting section will let you customize the font size, font color, and hover color for your icon set. Customize the icons as per your preference and display them beautifully on your WordPress menu. Besides, this section also contains menu label settings that will allow you to set the custom color for your menu label individually.

After all the customization is done, save the settings. Then, follow the same steps to add the icons for each of the menu items. After you add the icons to all the menu items the result like the one below can be obtained.

You can also learn the step by step guide from the video tutorial:

Wrapping Up

By this way, you can add some beautiful icons to your WordPress navigation menu to enhancing its outlook. A well designed and informative navigation menu can provide Various types of benefits to your WordPress website. So, making your menu look attractive very important.

If you are looking for a menu plugins then, check out the collection:

• Top 3 Custom Icons Plugins for WordPress Menu – Compared
• 10+ Best Premium WordPress Mega Menu, Custom Menu Plugins (Make your WordPress website navigation 75% more effective)

Also check the similar tutorial of:

How to enhance your WordPress website Navigation with Mega Menu, Fly Menu, Circular Menu, Custom menu icons and more!