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:

cake-gray

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:

cake-admin

And that’s really just about it!

How to make a custom Dashicon the easy way (image and CSS only)
How to make a custom Dashicon the easy way (image and CSS only)
Find out how to make a custom WordPress Dashicon for you admin panel without having to deal with editing fonts, and using only PHP and CSS.

Articles across the web

Search

Subscribe to the mailing list

Follow N64 Squid

  • RSS Feed
  • Tumblr

Popular posts

Retron 5

Leave a Reply

Your Name (required)

Your Email (required)

Website

Your Message