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! 🙂



RSS From Toby’s Blog

  • The Horrors of Covering Your Own Ass
    Today I emailed a very simple question to support@[companyname].com (2 sentences total). The automated response I got back was this: Keep in mind that the above was an auto-response and: It’s hard to read. Everything has the same import (e.g. none of it is important enough to call out separately). It’s long. It added absolutely-zero…
  • If something stupid makes money, then it’s not stupid.
    I’ve seen some stupid things in my life…And some of them were really really smart. I remember a story from decades ago where the U.S. military was looking to equip the Stealth Bomber with a fancy computer-driven video system so the pilots could see behind them. Well, the computers failed to get the job done,…
  • There is no destination.
    Coding is a process of failure followed by a moment of great joy. You've gotta ride through the failures to experience the joy...

More posts from themightymo.com

How to deactivate all WordPress plugins via the database

By The Mighty Mo! Design Co. | January 20, 2022

Go to phpMyAdmin. Go to the “wp_options” table. Search for the field named, “active_plugins”. Edit the “active_plugins” field. Delete the value/contents of the “active_plugins” row. Save. That’s it! All your plugins are now deactivated!

Website DNS, Domain Registration, & Hosting Basics

By Toby Cryns | November 30, 2021

Websites have multiple layers: Domain Registration When you register a domain, you pay someone ~$20/year for a .com domain. Registration means you are leasing the domain for a year or more. A domain is the “yoursite.com” or “yoururl.net” or “yourorganization.org” that people type into their browser. We use services like Namecheap, Dreamhost, and GoDaddy for…

Avada ThemeFusion loads 80+ javascript files on every page! DON’T RECOMMEND!

By The Mighty Mo! Design Co. | November 18, 2021

I inherited a WordPress site using Avada ThemeFusion, and it is experiencing really bad performance issues. After doing lots of my standard bag-of-tricks optimizations to little effect, I decided to simply count the javascript files. To my surprise horror, I found it was loading over 80 javascript files on every single page! (For comparison: themightymo.com…

RSS From Toby’s Blog

  • The Horrors of Covering Your Own Ass
    Today I emailed a very simple question to support@[companyname].com (2 sentences total). The automated response I got back was this: Keep in mind that the above was an auto-response and: It’s hard to read. Everything has the same import (e.g. none of it is important enough to call out separately). It’s long. It added absolutely-zero…
  • If something stupid makes money, then it’s not stupid.
    I’ve seen some stupid things in my life…And some of them were really really smart. I remember a story from decades ago where the U.S. military was looking to equip the Stealth Bomber with a fancy computer-driven video system so the pilots could see behind them. Well, the computers failed to get the job done,…
  • There is no destination.
    Coding is a process of failure followed by a moment of great joy. You've gotta ride through the failures to experience the joy...