12/13/2015 - 4:15 PM

How to change mobile responsive hamburger icon in Genesis

Sridhar Katakam

#responsive-menu-icon::before {
	font-family: "dashicons";
	content: "\f346";

/* --- In line 3 change the value of content property for your desired icon 
by going to, clicking on icon, scrolling 
to top of that page and clicking ‘Copy CSS’.

Source: 000 */
//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'dashicons' );
function dashicons() {

	wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );


Want to replace the hamburger menu icon with another like an arrow?

We can use a icon from Dashicons which are already present in WordPress.