Two things remain irretrievable: Time and First impression. Your first impression is important as you won’t get another chance to make a good first impression again. The same goes for your website design, the more appealing and professional it is, the more convenient and fun it is to navigate through your website.
In this tutorial, we will see How to add icons to your WordPress navigation menu using ‘Font Awesome 4 menus’ plugin and why you should prefer this over using custom CSS code method.
Why add icons to your WordPress navigation menu and why use a plugin?
One of the many ways to improve your online presence and grab the attention of your target audience is to to do something out of the box. Adding icons to your WordPress navigation menu is one way to stand out from the rest of the crowd. Icons tweak the look and feel of your website and provide a good user-experience to your visitors. It makes it easy for your visitors to easily navigate through your website by simply clicking on the icons.
There are two ways you can add icons to your WordPress navigation menu-
- Adding icons using the ‘Font Awesome 4 menus‘ plugin
- Adding icons without plugins using CSS code
The major reason to use a WordPress plugin to add icons is that it is more convenient and super easy to do so. Also, adding icons using CSS code bloats your theme which increases your page loading time and causes rendering issues until external CSS is loaded.
Another reason to use a plugin to do so is if you add icons to your custom menu using only CSS code you can only see them until your current WordPress theme is active. Once you deactivate your present theme or activate a different theme on your site, the settings will revert back to default and you would have to add the CSS code again for icons to appear. This way you would have to add CSS code to your custom menus every time you change your theme.
Using the ‘Font Awesome 4 menus’ plugin you can easily add icons to your navigation menu from font awesome library without having to lose your settings every time you change your WordPress theme.
So, let’s dive straight into it and make our website more attractive.
Here’s How to add icons to your WordPress navigation menu
Step 1: Add ‘Font Awesome for 4 menus’ plugin
- Login to your WordPress dashboard
- Click on Plugins > Add new
- Search for font awesome 4 menus plugin
- Click on install> and then Activate the plugin
Step 2: Enable custom CSS classes
- Go to Appearance
- Click on menus
- Click on Screen Options
- Select CSS classes
- Click on any menu item to check whether widget CSS classes is activated or not
Widget CSS classes enable you to add custom classes and id’s to your WordPress sites.
Please note that only adding CSS style code will not work you need to edit your theme’s style.css or add another plugin that allows you to add custom CSS.
Step 3: Go to Font Awesome website
- Go to Font Awesome website
- Click on Icons in the menu bar
- You can access a library of hundreds of icons from web development icons to medical icons
- For the purpose of this tutorial let’s add icons for Homepage, Terms and Conditions policy page and Privacy policy page.
Step 4: Copy custom CSS font awesome code from icon library
- Search for the icon you are looking for in the search bar. In our case we are looking for an icon for the homepage, so type home in the search bar
- From the search result click on the icon you like
- Copy the font awesome icon CSS code and paste it to widget CSS classes
Step 5: Add CSS codes of icons to menus
- Go to menus in the appearance settings
- Click on the drop-down arrow on the ‘Home’ menu
- Paste the CSS code of the Home icon you copied from Font Awesome website in the widget CSS classes field
- Click on Save Menu
- View your site after saving your settings
- As you can see a Home icon before the navigation menu text
- Similarly, for other items or categories in the navigation menu follow the same steps as mentioned above
This is the easiest and most convenient method to add icons to your WordPress navigation menu to make your website more appealing and professional looking for your happy readers.
Do you use icons for your navigation menus? If yes, then do tell in the comment section and please leave a reply if you this method works for you.
