Library Technology – Reviews, Tips, Giveaways, Freeware

How To Use Menu Icons Plugin to Add Icons In WordPress Menu?

Posted In Wordpress plugins, Wordpress tips - By Techtiplib on Thursday, July 3rd, 2014 With No Comments »

Icons are today considered to be inevitable part of designing. There are lots of icons that have acquired global recognition. Airport signage icons (for example), help guide visitors their way from finding coffee corners, to gates and so on. Likewise, using icons in website design help the site visitors to navigate from one page to another.

Icons help convey message to users, and play a major role in enhancing user experience and making the website look more eye-catching. However, it’s important to display icons that truly reflects the desired message to page visitors as per your vision. Most importantly, menu icons needs to be carefully designed as they guide a page visitor to perform a desired action. Simply put, menu icons help users locate the information he/she might be seeking.

Menu Icons For WordPress Website – A Foreword

Especially, when it comes to showcasing icons in a WordPress website, it may seem challenging to you in the very beginning. But before we proceed, let’s have a look at the menu icons in the WP site that you must be aware of.

add icon in WordPress menu 11

If you will look at the above image, you can icons with the navigation menu. Each icon clearly identifies its purpose. Remember, navigation helps improve your site usability and thus, it’s important that you should place suitable icons in your WP nav menu.  

Let’s have a glance at the way that will help you display icons in WordPress Menu.  

Introducing Menu Icon

Now you can easily add icons to your WordPress powered site, with help of the WP plugin – Menu Icons. Menu Icons is an easy-to-use plugin that allows adding icon in your menu. 

Just install and activate the plugin. In the below screenshot you can see that the Menu Icons plugin is now activated. 

add icon in WordPress menu 21

Understanding the Process of Adding the Icons 

Once the plugin gets activated, go to Appearance>Menus to make alterations in your menus. First of all, enable or disable the icon types in “Menu Icons Settings” meta box.

add icon in WordPress menu 31

Let’s Take an Example:

The Menu Icons plugin comes with three libraries named Dashicons, Genericons, and FontAwesome. You can freely select any icons that you like from the libraries, but it’s better to use icons from a single library throughout the website. This will help maintain the consistency of your icon.

Let’s suppose you chose the Dashicons library, now before proceeding further with the how to “Select Icons” from Dashicons, let’s first have an overview about it. Dashicons is a new set of font icons designed for WP 3.8 version.

Now that you have decided to pick icons from Dashicons, you will see the following screenshot. 

add icon in WordPress menu 41

After selecting the icon, you’ll see its preview on the right panel. You can make some adjustments in the right panel. For instance, you can reposition the icon before or after your menu. Plus you can even adjust the font size, and change the vertical alignment. After making adjustments click on “Select” option, and continue to add another icon from the menu.

add icon in WordPress menu 51

Let’s Wrap Up!

Adding icons has become an integral part of a website. Icons are pictorial representation of the message that you want to convey to your visitors. For instance, the social media icons display information about the social media network that it is linked to. In case you have a WordPress site, and want to add icons to your website menu, then you can make use of the ‘Menu Icons’ plugin as discussed in this post. It’s a handy plugin that allows adding icons in your site navigation, thereby guiding users to move from one page to the other. 

Author Bio:

Maria Mincey is a blogger who loves to share everything about web development and new web design technologies initiatives. She currently works as a chief writer for WordPrax Ltd., a PSD to WordPress Conversion company and has a quantum experience to share. Follow her on Twitter: @mariamincey64

More contents in: ,

About - Hey, this blog belongs to me! I am the founder of TechTipLib and managing editor right now. And I love to hear what do you think about this article, leave comment below! Thank you so much...