All articles

wordpress · Jul 20, 2017

Reference WordPress Dashicons in CSS

DA

David M. Auble

Solution Architect · 1 min read

Recently I had an issue where I needed to remove a mega menu plugin in order to improve a site’s PageSpeed score. In breaking it down, I realized the plugin was referencing the WordPress Dashicons, something I would need to add in when rebuilding the navigation menu.

I looked online and finally found the solution: load the dashicons from the functions.php file.

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );

function load_dashicons_front_end() {
  wp_enqueue_style( 'dashicons' );
}

Then, in your CSS, simply reference them as a new font:

.item { content: '\f140'; display: inline-block; font-family: dashicons; }

I found this snippet from WP Sites. For the complete Dashicon library, look at the WordPress Dashicon Developer Resource.

---

wordpress dashicons css php css

DA

David M. Auble

Indianapolis-based solution architect. I build, secure, and rescue web applications — and write about the tools that make it easier. Get in touch →