WordPress has a special feature of menu icon on the admin panel. With it, you can easily know the main purposes of the menu items so as to better manage the site back-end. Now, you also have the option to apply this feature to your website front-end. Here, we mean you can display the graphical icons on your navigation menu. In this case, your visitors can get the visual clue of the function and content of each menu item. Also, this practice achieves the proper design touch to your WordPress site.
In this post, we’d like to share the simple steps of how to add icons to WordPress navigation menu. Personally speaking, we think the usage of the Menu Icons plugin is an easy and effective idea.
Utilize the Menu Icons Plugin
This plugin is a simple and lightweight option that can spice up the navigation bar of your WordPress site using the visual appealing icons. The utilization of this plugin is not difficult. You do not need to make any configuration of it, but can leverage the menu editor directly by clicking the Appearance > Menus button.
Here, if you have generated multiple navigation bars, you need to choose your target one. And then, you can move to the left-hand column and click the Menu Icons Settings tab. Here, you have three main settings to make the decision.
Choose the Global Icon Types
Firstly, you need to choose the icon types. By default, this plugin supports 7 icons types. They are the dashicons or the WordPress core icons, the Elusive icons, the Font Awesome, the Foundation icons, the Genericons, the website image attachments and the website SVG attachments.
Personally, in order to ensure the enough options you can choose for the menu icons, we highly recommend you to tick the checkboxes for all of these options.
Decide the Current Menu Settings
The next step requires you to determine some icons settings. For instance, you should decide whether to hide the labels for your menu items and only show the graphical icons. Frankly speaking, we do not recommend you to do so. Especially, if your selected icon is not clear or precise enough to tell people what this menu item is about, or, if your menu item is a generic one, you’d better avoid hiding the button label using the simple words.
In addition to this, you also should choose the exact position for the showcase of the icons. This plugin allows you to showcase the icons before or after the menu items. Also, you can choose the exact vertical alignment among 8 options to achieve the best display.
Also, based on the webpage design, you can choose the image size of the icons among the options of thumbnail, large, medium and full size. If you want, you can even enter the exact values for the SVG width and the font size.
Download the Extension If You Need
This is an optional step you take. Here, if you feel that all the available icons cannot meet your needs, you can download the IcnMoon extension to get more icon packages.
Now, you can save the settings and you can focus your attention on the Menu Structure area. Here, you need to check all the menu items for the navigation bar. In this case, you need to click the item name to open up a list of settings. After finding the option of Icon, you just should click the Select button.
This way, you can be presented with a popup window that lists all the icons supported by this plugin. From it, you can check the icon appearance and the icon name so as to make the right selection. If you want to search for the icons based on your needs, you can leverage the search box. Even, there is an advanced filter available, with which you can find the icons based on different menu item functions, such as admin, post, image editor, social, sorting and many more.
Note that the default icon type is the WordPress core icons. If you are looking for some other icon types, you can navigate to the left column of this window.
After choosing the icons, you can click the Save Menu button to save the changes. This way, your navigation bar can look like as this way.
An Alternative Method
It is possible that you may do not want to install an additional plugin. In this case, you can also adopt the manual way as introduced in the following.
To begin with, as this method may override the CSS of your current template, you’d better create a child theme firstly. This way, even if you have upgraded your template, the modification for menu icons will not be removed.
After that, you can activate the icon library of Font Awesome in your child theme. Here, you need to navigate to the function.php file of your theme folder and enter the below lines of code into it.
Now, you can go to the Menus page of your admin and target each menu item one by one. Here, you need to open the Screen Options tab and tick the checkbox of CSS Classes. This way, you can find a new menu setting option of CSS Classes.
From this field, you can enter the classes of “fa fa-lg” firstly, which indicate that the icons are coming from the Font Awesome library and the icon size is large. Note that if you want the larger icon, you can replace the second class with the options of “fa-2x”, “fa-3x” and “fa-4x”.
As for the last class, you should go to the icons page of Font Awesome. After targeting your wanted icon, you can copy and paste the corresponding class.
Now, you can repeat this step for all the menu items and do not forget to the save the changes.