Resizing Dashicons in WordPress

If you’re working on a quick and dirty prototype like I am and don’t want to bother with getting yourself a more varied set of icons, or if you just like the look of Dashicons and want to use them on the front end of your WordPress site you can do so pretty easily! They’re already loaded by WP core and you just need a little code snippet to make them accessible on the front end. Add this to your functions file and you’re away:

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

Then you can add them to your html like this:

<div id="met-left" class="dashicons dashicons-arrow-left-alt2"></div>

and it will render an icon for you:

But what if you want to make them bigger for a feature icon? It’s easy to simply change the size of the Dashicon using font-size, but this moves it outside it’s original position. You need also to change the width and height of the containing element itself to get it to sit right:

.dashicons {
  font-size: 60px;
  width: 60px;
  height: 60px;
}

Happy iconing!