Cacher is the code snippet organizer for pro developers

You may need to replace all instances of .nav-header in the above to match the selector that represents the nav bar in which you want to add the icons (before the menu items).

Also make sure you specify the correct class names matching those you set for the menu items in the previous step.

The codes for various icons can be obtained at https://developer.wordpress.org/resource/dashicons/, clicking on the desired icon and clicking Copy CSS link.

Reference: http://stackoverflow.com/a/8820459/778809

https://sridharkatakam.com/add-font-icons-navigation-menu-items-genesis-using-dashicons/

.nav-header li > a:before {
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: middle;
	padding-right: 4px;
	display: inline-block;
}

.nav-header li > a:hover:before {
	text-decoration: none;
}

.nav-header li.sample > a:before {
	content: "\f313";
}

.nav-header li.layouts > a:before {
	content: "\f181";
}

.nav-header li.templates > a:before {
	content: "\f116";
}

.nav-header li.contact > a:before {
	content: "\f466";
}

At Appearance > Menus, pull down Screen Options near the top right and tick CSS Classes.

Edit your menu and add custom CSS classes to the menu items.

//* We can load Dashicons, specify classes to the menu items and add CSS to display icons before the nav bar menu items.


//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
	wp_enqueue_style( 'dashicons' );
}