Using Dashicons in WordPress Themes

Many WordPress users learn about using Dashicons when they go to create their first Custom Post Type and assign a Dashicon to represent that Custom Post Type in the Admin menu.  But then the frustration begins as soon as you attempt to use a Dashicon on the frontend of the site.

The developer resources at WordPress.org make it extremely easy to copy/paste either the Glyph, HTML, or CSS version of a Dashicon.  But if you have ever tried to copy/paste a Dashicon into a widget area or a post you would have experienced the frustration of nothing showing up.

Why Dashicons?

The reason the Dashicon doesn’t show up on the frontend is that the Dashicon stylesheet is not being enqueued to be used on the frontend.  So here are two code snippets you can use to start using Dashicons on your WordPress website immediately.

Add Dashicons as a Dependency

function load_my_styles(){
    wp_enqueue_style( 'mycustomstyle', get_stylesheet_uri(), 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'load_my_styles' );

Simply Enqueue Dashicon Stylesheet

function enqueue_dashicons(){
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );

I hope this helps you take advantage of Dashicons in your WordPress site.  Let me know how you utilize font icons in your web development.

Leave a Reply

Your email address will not be published. Required fields are marked *