How To Make Top Level Menu Icons In WordPress Compatible With Any Color Scheme

Plugins Using Non Transparent ImagesWordPress 3.8 shipped with eight different color schemes. The Admin Color Schemes plugin provides an additional 8 color schemes to choose from. All of these choices in colors are a great thing for users but there is one problem. Plugins that use images for custom top-level menu icons disrupt the consistency of the WordPress backend.

Using Dashicons

Dashicons were added to the core of WordPress with the release of 3.8. Dashicons are what’s known as an icon font. The icons are vector based so they can be as large or small as you want without losing quality. Plugin authors can use CSS, HTML, or a Glyph for use within Photoshop to display an icon.

Dashicons

Plugin authors are encouraged to look at the variety of Dashicons available to see if one matches the functionality provided by the plugin. For example, a portfolio plugin can use the portfolio Dashicon. My initial concern with using Dashicons is that two different plugins could end up using the same one. When I asked around to see what other people thought, the most common response was that most sites don’t contain two activated plugins with similar functionality.

Using An SVG Icon

If plugins authors want to use a custom icon, they can use an SVG image. Similar to Dashicons, SVG images can scale large or small without losing quality. WordPress has JavaScript within the core so that SVG icons will automatically blend in with any color scheme.

It’s A Simple But Important Fix

Back in March of 2013, Matt Thomas outlined various methods that plugin authors could use to add top-level menu icons that would fit in with MP6. He explained the pros and cons of each method and at the end of post, suggests the best method to use. Whichever method plugin authors choose, I ask them to make the simple change to their top-level menu icons so that they become a natural part of the WordPress backend.

6 Comments


  1. I love this post because it encourages consistency, and I hope plugin (and theme) developers everywhere take note.

    *Quick correction: The Admin Color Schemes plugin provides an additional eight color schemes, not 16. You’ll have a TOTAL of 16 options if you install it, though.

    Report


    1. Thanks Dave. Corrected the typo with 8 instead of 16. I looked at a picture of the plugin installed and saw 16 and well, that’s where the confusion came in.

      I think consistency is important and although this is a small fix, I have my doubts on existing plugins making the switch to a better top level menu icon.

      Report


      1. I use custom icon images for Custom Post Types on sites of clients and since 3.8 I have changed all those into dashicons.

        I think plugin developers who have made the effort to give their plugin a separate top level menu in the sidebar, should now also step up and change their image into something that can be used on all admin color schemes.

        What I find a little disappointing though is the way that is supposed to be done. I mean I have read the linked “instructions” post of March last year and it’s good that none of my plugins have their own top level menu, because I would not make the effort to change anything anytime soon!

        Why can’t it be done by adding a dashicon, or any other icon-font for that matter? Really if you want the masses to adapt quickly, then you need to keep it simple imo.

        Report


    2. I have plenty of doubts, too. Many of them will not change. But the ones smart enough to read the Tavern will… and that’s a good start :-)

      Report


  2. Thanks for linking the how-to, i was actually thinking about updating this in my software.

    Report


  3. I found that using SVG images for menu icons, especially base64 embedded, did not work. Using a custom icon font is the best way to go.

    Report

Comments are closed.