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

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:

function my_plugin_menu() {
	$menu = add_menu_page('Cake', 'Cake admin', 'administrator', 'cake', 'cake_settings', 'dashicons-cake', 66);
	add_action( 'admin_print_styles-' . $menu, 'cake_css' );
}

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:

add_action('admin_head', 'my_custom_favicon');
function my_custom_favicon() {
  echo '
    <style>
    .dashicons-cake {
        background-image: url("'.plugins_url().'/caking/images/cake.png");
        background-repeat: no-repeat;
        background-position: center; 
    }
    </style>
'; }

Of course, you can include this in a CSS file that’s included on the admin panel, but just so long as you have the complete URL for the image file. This is how it should appear:

And that’s really just about it!