Skip to content

Instantly share code, notes, and snippets.

@carasmo
Created August 7, 2016 00:10
Show Gist options
  • Save carasmo/a6315d4cccb8f498de38095c9d5ad57d to your computer and use it in GitHub Desktop.
Save carasmo/a6315d4cccb8f498de38095c9d5ad57d to your computer and use it in GitHub Desktop.
add dashicons to genesis nav menu
//* Goes in functions.php
/**
*
* Add Front End Dashicon Support
*
*/
function yourprefix_add_front_end_dashicons() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'yourprefix_add_front_end_dashicons' );
/// END PHP don't copy this line
/* CSS goes in style.css */
.genesis-nav-menu [class^="icon-"] > a::before{
font-family: 'dashicons';
line-height: inherit;
margin-right: 5px;
vertical-align: middle;
}
.genesis-nav-menu .icon-heart > a::before {
content: "\f487";
}
// END CSS don't copy this line or any of the instructions that follow into your php or css files
////////////////////////// INSTRUCTIONS ////////////////////////////////
Add Front End Dashicon support in your functions.php file (the php above)
Go to Appearance > Menus
Toggle Screen Options
Click the CSS Classes checkbox
Go to a menu item below and add the class "icon-heart" without quotes in the field
Paste in the CSS above
Make your own:
Create a new class that begins with icon- example: icon-video
Visit: https://developer.wordpress.org/resource/dashicons
Click the icon you want
Get the content (click Copy CSS): "\f126"; to copy to your CSS
Add another property below the icon-heart in your style.css file and rename with your new class and put in the correct content
.genesis-nav-menu .icon-video > a::before {
content: "\f126";
}
/////////////////////////////////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment