How to Add Icons to Your WordPress Menu Easily
Icons are a fantastic addition to any design. Many icons are universally recognized. For example, public toilet signs at the airport use icons to show which restroom is for men and which is for women, making it easy to understand even if you don’t know the local language.
The same concept can be applied to a website; using icons can help users navigate your site more easily, enhancing the user experience and making the site look more attractive.
However, adding icons in a CMS like WordPress can be tricky. If your site is built on WordPress, here’s the easiest way to display an icon in the WordPress menu.
How to Add Dashicons to Your WordPress Theme or Plugin
With the revamped WP-Admin in WordPress 3.8, a brand new set of icons called Dashicons was introduced. Dashicons,... Read more
Getting Started
Adding an icon in WordPress is made simple with a plugin called Menu Icons. First, install and activate this plugin.
Now we are ready to add the icons.
Adding Icon
For this example, I am using the TwentyTwelve theme, which is clean and simple. I have also created a few pages to include in the menu.
Create a new menu by going to Appearance > Menus. Remember to assign the menu location, or it won’t show up on the website.
Next, we’ll add an icon for each menu item. Start by expanding one of the menu items. You’ll see a link that says Icon: Select icon. Click on “Select icon” to begin. A window similar to the WordPress media library will appear.
Currently, the plugin includes 3 font icon libraries: Dashicons, Genericons, and FontAwesome.
Even though you can use icons from any library, it’s best to stick to one to maintain consistency. For instance, if you choose FontAwesome, use it throughout the website to ensure the icons look unified and consistent.
When you select an icon, you’ll see a preview on the right panel. In this panel, you can make adjustments, such as placing the icon before or after the menu item, adjusting the font size, and setting the vertical alignment. Once you’re satisfied, click Select and proceed to add icons to the other menu items.
Final Thought
Menu Icons is a very useful plugin for adding icons to your menu. It integrates well with the WordPress UI pattern, making it very easy to use. The developer has also planned a few new features for upcoming versions, including adding more icon libraries and the ability to upload custom icons.
I hope you find this tip useful. Give the plugin a try and see how it enhances your site.
Note: This post was first published on the Jun 30, 2014.