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

0
How to Add Custom Icons in your WordPress Menu? (Step by Step Guide)
How to Add Custom Icons in your WordPress Menu? (Step by Step Guide)
MyThemeShop-wordpress-themes

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

Best Custom Icons Plugin for WordPress Menu – WP Menu Icons
Best Custom Icons Plugin for WordPress Menu – 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.

WP Menu Icons – Enable WP Menu Icons
WP Menu Icons – Enable WP Menu Icons

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.

WP Menu Icons – Add Menu Icons
WP Menu Icons – Add Menu 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.

WP Menu Icons – General Settings
WP Menu Icons – General Settings

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.

WP Menu Icons – Icon Settings
WP Menu Icons – Icon Settings

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.

WP Menu Icons – Animation Settings
WP Menu Icons – Animation Settings

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.

WP Menu Icons – Custom Menu Label Styling Settings
WP Menu Icons – Custom Menu Label Styling Settings

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.

WP Menu Icons
WP Menu Icons

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:

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!

Elegant WordPress Themes

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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