Dashicons Font is a wonderful and useful set of icons included in WordPress since its 3.8 version as part of its new admin environment. WP uses these icons to identify posts, media tools, editor tools, etc. In admin environment you have not to do anything for loading this set –it is loaded by default by WP–, however Dashicons Font is not loaded as part of any theme. So, what do we have to do for using Dashicons inside our themes?

Nowadays, most of browsers allow us the use of fonts for improving the appearance of our pages and this feature is supported via CSS through the @font rule so our first step would be to load Dashicons Font inside the style.css file of the theme and afterwards to describe all CSS rules for using it.

If you want (or you need) you can do it by hand but, normally, it’s easier to load the dashicons.css file included in /wp-includes/css/ WordPress directory what contains all of these CSS rules and, in addition, offers to you a simple interface via the HTML class attribute for using easily any of its icon.

Well, if you prefer the second option, the easiest, you have to include this PHP code inside the functions.php file of the theme.

<?php wp_enqueue_style ('dashicons'); ?>

That’s all. With this simple PHP instruccion you ‘ll be allow for using any icon included in the Dashicons Font in your HTML code.

For example, if you want to add the video icon before the post title of any publication whose post format is video, you could include this simple code in the single.php file of your theme.

/* inside the single.php file in the theme */ 

<header class="entry-header">
    <?php if ( has_post_format('video', get_post_ID() ) == TRUE ) : ?>
        <span class="dashicons dashicons-video-alt"></span>
    <?php endif; ?>
    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header --> 
...
...

Finally, for including correctly the load of dashicons.css file in your functions.php, the complete PHP code is this:

/* inside the functions.php file in the theme */

if (!is_admin() ) {
    function load_dashicons_font() {
        wp_enqueue_style( 'dashicons' );
    }
    add_action( 'wp_enqueue_scripts', 'load_dashicons_font' );
}

With this 6 lines code in your theme functions.php, you can change completely the appearance of any part of your theme. It’s ease, you have just to add the correct <span> HTML tag in the place where you want to show an icon. See the complete list of icons in the official Dashicons WordPress Page.

Of course, the chances are that in addition to this simple 6 lines PHP code, you want to add to your style.css file some additional CSS commands for controlling the alignment, color, size, etc. of the icons.

Have a nice WordPressing!