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:
- Register (enqueue) Dashicons in your child themes functions.php file.
- Add a unique class to each menu item
- 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:
Was This Tutorial Helpful?