• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Primary Nav Menu Icons

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.

screen options - css classes

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.

menu item css classes

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:

Register for full access

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

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.