Using dashicons in WordPress

I was working on a theme today, and wanted to use the neat retina-ready icons we see on the WordPress back-end since version 3.8 or thereabout.

This is easy – just load the font “dashicons” in your styles-queue (thanks @Jameskoster):

add_action( 'wp_enqueue_scripts', 'themename_scripts' );
function themename_scripts() {
wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );
}


…and use the icons by setting the content of the :before pseudoclass to the code. Example:

.comment-link:before {
font-family: "dashicons";
content: "\f101";
}


An overview of all available icons can be found here.