Created
August 7, 2016 00:10
-
-
Save carasmo/a6315d4cccb8f498de38095c9d5ad57d to your computer and use it in GitHub Desktop.
add dashicons to genesis nav menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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