Skip to content

Instantly share code, notes, and snippets.

@BoweFrankema
Last active March 31, 2018 02:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save BoweFrankema/9938383db43378bdb56b to your computer and use it in GitHub Desktop.
Save BoweFrankema/9938383db43378bdb56b to your computer and use it in GitHub Desktop.
Add Dashicons to your Customizer Panels. You can find the dashicon CSS classes here: https://developer.wordpress.org/resource/dashicons/#id
<?php
/**
* Enqueue the stylesheet.
* http://aristeides.com/blog/modifying-wordpress-customizer/
*/
function my_enqueue_customizer_stylesheet() {
wp_register_style( 'my-customizer-css', YOUR_PLUGIN_URL. 'assets/css/customizer.css', NULL, NULL, 'all' );
wp_enqueue_style( 'my-customizer-css' );
}
add_action( 'customize_controls_print_styles', 'my_enqueue_customizer_stylesheet' );
/*!
* The panel names are based on the IDs you assign to them. Use your Firebug/Chrome inspector to quickly find them.
*/
#customize-controls .accordion-section-title:before,
#customize-controls .panel-title:before {
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-family: dashicons;
font-size: 20px;
font-style: normal;
font-weight: 400;
height: 20px;
line-height: 1;
text-align: center;
text-decoration: inherit;
vertical-align: top;
width: 20px;
opacity: 0.6;
}
#customize-controls .accordion-section-title:before:hover,
#customize-controls .panel-title:before:hover {
opacity: 1.0;
}
#customize-controls .panel-title:before {
left: 2px;
margin-right: 5px;
position: relative;
top: 4px;
}
#customize-controls #accordion-panel-wf_plus_stylekit_panel .panel-title:before,
#customize-controls #accordion-panel-wf_plus_stylekit_panel > h3:before {
content: "\f100";
}
#customize-controls #accordion-panel-wf_plus_layout_panel .panel-title:before,
#customize-controls #accordion-panel-wf_plus_layout_panel > h3:before {
content: "\f135";
}
#customize-controls #accordion-panel-wf_plus_typography_panel .panel-title:before,
#customize-controls #accordion-panel-wf_plus_typography_panel > h3:before {
content: "\f205";
}
#customize-controls #accordion-panel-wf_plus_buddypress_panel .panel-title:before,
#customize-controls #accordion-panel-wf_plus_buddypress_panel > h3:before {
content: "\f336";
}
.accordion-section-title:before,
.panel-title:before {
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-family: dashicons;
font-size: 20px;
font-style: normal;
font-weight: 400;
height: 20px;
line-height: 1;
text-align: center;
text-decoration: inherit;
vertical-align: top;
width: 20px;
opacity: 0.6;
&:hover {
opacity: 1.0;
}
}
.panel-title:before {
left: 2px;
margin-right: 5px;
position: relative;
top: 4px;
}
#accordion-panel-wf_plus_stylekit_panel {
.panel-title:before,
> h3:before {
content: "\f100";
}
}
#accordion-panel-wf_plus_layout_panel {
.panel-title:before,
> h3:before {
content: "\f135";
}
}
#accordion-panel-wf_plus_typography_panel {
.panel-title:before,
> h3:before {
content: "\f205";
}
}
#accordion-panel-wf_plus_buddypress_panel {
.panel-title:before,
> h3:before {
content: "\f336";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment