With the presence of Font Awesome, displaying an icon on a website or blog is so easy, we no longer need to look for an image just to display an icon to beautify our website. In connection with Font Awesome, Surely you have visited a site that has a menu with a sweetener icon next to the text of the menu. You want to make it also on your wordpress site? In this article I will show you how to easily add an icon to the wordpress menu. See an example of a wordpress menu with an awesome icon font below.
To add an icon like the image above, you only need to install plugins Font Awesome 4 Menus, this is an awesome plugin Icon for your WordPress menu without touching a single line of code! With this plugin, just add fa (icon name) as a class for your menu and the plugin will display it.
Displaying the WordPress Menu Icon
To display the icon on your wordpress menu, all you have to do is install and activate the Font Awesome 4 Menus plugins. After that, visit the awesome fonts site, and find a list of the icon classes you want to display here. If you have found it, now go to Appearance »Menus. Click Screen options at the top right and tick Css Classes.
After you check CSS Classes on the options menu screen, now open the menu where you want to add an icon, in this example I will enter the class fa fa-home on the home menu. See the picture below.
After you add the class as above, now save the menu you edited and now look at your wordpress site, an icon will appear on the menu.
Apart from displaying icons on the wordpress menu, this plugin can also display icons on your content, because this plugin has provided shortcodes to add icons to posts and pages. As an example of a shortcode: [fa class=”fa-home”].
Hopefully the article above can help you to add an icon to your wordpress menu. 🙂