Add Icons To Nav Menu Items

In this tutorial, i’ll show you 2 ways to add icons before each nav menu item in Genesis.

There’s 3 simple steps to follow:

1. Register (enqueue) Dashicons in your child themes functions.php file.
2. Add a unique class to each menu item
3. Add CSS to your child themes style.css file for each icon.

Register Icons

Simply copy & paste this code to the end of your child themes functions.php file.

add_action( 'wp_enqueue_scripts', 'add_dashicons_front_end' );

function add_dashicons_front_end() {

wp_enqueue_style( 'dashicons' );

}

Add Classes To Each Menu Item

Go to Appearance > Menus and check the screen options tab in the top right hand corner.

Check the CSS Classes box.

Expand each menu item and add a unique name for each class.

In this example, i’ve added home-icon as the new class for the home link which will be used in the style sheet to style the home menu icon.

Save the changes after adding unique classes to each item.

There’s at least 2 ways to use CSS to add icons before menu item labels:

Related Tutorials

• Add SVG Icons To Custom Nav Menu In Genesis
• Add Drop Down Indicators To Nav Menu Items
• Add Images Behind & Above Nav Menu Links