How to make a custom Dashicon the easy way (image and CSS only)

Posted 7 Nov 2016

A little break from the usual N64 stuff to share a little something I’ve discovered. I’ve been looking on how to make custom Dashicons for a WordPress site I’m developing but most of the tutorials out there talk about editing fonts and so on… so I managed to write a hack that allows you to make a quick and easy custom dashicon for your admin panel.

Advantages

Easy to implement

Similarly, can be changed easily

Disadvantages

Doesn’t change colour when hovered/selected (maybe possible with further code)

Might not be future-proof

How to implement the easy custom Dashicon

First of all, you’ll need an image. For compatibility, I suggest these settings:

16×16 pixels size

#9EA3A8 for the colour

Transparent background

PNG file compression

This is the image I’ll be using:

For argument’s sake, I’ll be putting this code in a plugin folder, but it can just as well work if implemented into a theme. If your plugin has a menu item, you might have a bit of code like this to make it appear on the left-hand side of wp-admin:

What the 6th argument (dashicons-cake) does here is assign a CSS class to the dashicon on the left of the menu item. We’re going to take advantage of this to insert our image. In a separate hook/function, we’re going to do the CSS bit: