Dashicons: WordPress Retina Ready Font Icons

By April 14, 2014 Design, Programming No Comments

December saw WordPress 3.8 go live!  If you haven’t already, it’s time to update and begin digging into all the new WordPress goodness!  WordPress 3.8 brought a host of updates, a completely revamped dashboard, and one little gem we thought you might like to learn about: retina ready icons.

You rely on WordPress to simplify your life when it comes to managing your site and all of its content.  Well, your life was just simplified even more with the new WordPress Dashicons.  These icon fonts are baked right into the latest WordPress release and are retina ready.

If you’re already using Font Awesome for your website icons then you’re already familiar with how to use Dashicons.  For the uninitiated we’ve got the skinny on incorporating them into your next project.  Alright, time to dive in!

Enqueue Dashicons

The first thing you’ll want to do is enqueue Dashicons.  This is simple.  Locate your functions.php file and load up Dashicons as a dependency of your themes style sheet.

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

Guess what?  You’re ready to knock out some Dashicons.  The Dashicons function in your css using  :before or :after and making a font-face call to Dashicons.

How about an example?  Don’t mind if I do.

 Your CSS

Say I want to place a Dashicon before the list items in my navigation. I’ll jump over to http://melchoyce.github.io/dashicons/, select the icon I would like to include, select “copy CSS”and copy the CSS snippet from the modal.

After that it’s simply a matter of jumping into my CSS.

.check:before {
font-family:'dashicons';
content:"f147";
font-size:24px;
color:#216287;}

You’re done!  You can style these icons however you would like with your CSS.

Dashicons

make icons

easy!

WordPress 3.8 saw some major updates in December and Dashicons were a pleasant addition.  We hope to see you using them in your upcoming projects!