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.
- Activate the font awesome library from your active functions file.
- Add CSS classes to the items in your navigation menu, via the WordPress admin.
- 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
|
1 2 3 4 5 |
function wmpudev_create_icon_stylesheet() { wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' ); wp_enqueue_style( 'fontawesome'); } add_action( 'wp_enqueue_scripts', 'wmpudev_create_icon_stylesheet' ); |
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)
