Custom Icons in Your WordPress Custom Post Type Using Dashicons

There’s a new feature that slipped into the admin side of WordPress with the recently-released 3.8 – Dashicons!  Very similar to Font Awesome, Dashicons give plugin developers a nice set of pre-made icons to use.  The cool thing is that Dashicons come pre-loaded, and using them in your WordPress custom post types is as simple as adding a parameter to your register_post_type() function, like so:

// Register a new custom post type named "Portfolio"
register_post_type('portfolio', array(
 'public' => true,
 'menu_icon'=> 'dashicons-portfolio',
 'label' => __( 'Portfolio', 'local' ),
);

[source]

Here’s a screengrab from our Lowrize plugin using Dashicons:
dashicon example

Pretty nifty, eh?!

Posted in ,

The Mighty Mo! Design Co.

2 Comments

  1. James on January 4, 2014 at 1:15 pm

    What about an alternative implementation that makes use of CSS sprites(e.g. SVG with PNG fallback)?

    Would likely provide a couple of benefits:

    1. Improved compatibility with Opera Mini
    2. Smoother edges for icons
    3. Improved compatibility with IE8, without resorting to altering font icon encoding to use latin characters (which can mess with screenreaders)

    It doesn’t seem like it would be all that difficult to convert the font icons from DashIcons into SVG. PNG fallback would address SVG compatibility with IE8 and Android 2.X.

    Thoughts?



    • Toby Cryns on January 7, 2014 at 10:07 am

      @James – Great idea there.

      I think the only problem is ease of use – if there was a plugin that did all that or if WP integrated that solution into the core, then everyone would be on board with “more compatibility, etc.”

      Font icons are all the rage these days, though, so I wouldn’t hold my breath! 🙂



More posts from themightymo.com

How to merge two folders, including all sub-folders and files, on Mac

By The Mighty Mo! Design Co. | November 3, 2022

Today I had an issue where I needed to merge two folders, each of which contained many sub- and sub-sub folders that had lots of images. After a lot of trial-and-error and some Googling, I found the best solution is to use the “ditto” command in Terminal like this: That’s it! Hat tip to AppleInsider.

mailchimp usage stats

Some Surprising Trends in Website Development

By Toby Cryns | October 17, 2022

I wasted some time today to bring you (dum dum duuuuum!): Some Surprising Trends in Website Development!

How to Configure WordPress with Cloudflare, HSTS, TLS, and Secure Headers

By The Mighty Mo! Design Co. | October 11, 2022

I was recently asked to look into creating some secure http headers as well as forcing a website to load over TLS1.2+. Below are my “how to” instructions for updating these settings within WordPress and Cloudflare. Install & Configure the Cloudflare WordPress plugin. Make sure an SSL Certificate is installed on your host for your…