WordPress home menu item as home icon-Without Plugins Add Icons to Custom WordPress Menus


How to Add Menu Icons in Nav Menu –Overview

I tried to explain you some useful steps to create and add icon into your menu items.

  1. Activate the font awesome library from your active functions file.
  2. Add CSS classes to the items in your navigation menu, via the WordPress admin.
  3. Add some styling to your theme’s stylesheet to get the layout and fonts right.

Now Detail Procedure –

To active Awesome Library, into your theme folder, Edit function file called functions.php. If not still into theme folder then create new file called – functions.php

Adding CSS into Menu Items

Use some Class for each pages –

  • Home: fa fa-lg fa-home (as above: a house icon)
  • News: fa fa-lg fa-newspaper-o (a newspaper icon)
  • Gallery: fa fa-lg fa-camera-retro (a camera icon)
  • About: fa fa-lg fa-info-circle (an info icon)
  • Contact: fa fa-lg fa-envelope-o (an envelope icon)