I try to use the most flexible formats as I can in my work. That means spending a little more time up-front creating assets that are scalable and editable, so I don’t need to recreate the wheel every time a size changes or we need a hover state for something. Sometimes that means extra CSS. Sometimes it’s using an SVG instead of a rasterized image. And sometimes it means using icon fonts instead of image icons.
WordPress 3.8 made some huge updates to the dashboard interface design. At first I was very skeptical of the changes, but by now I’ve grown to really like them. They’ve polished things up quite a bit. One of the things that has come a long way is the icon system WordPress uses. It’s not perfect, but it’s really improved and expanded recently from some of the initial icons that were proposed.
With WordPress moving from image icons in the sidebar menu (and other places in the dashboard like the MCE editor), we’ve had to adapt our plugin icons as well. Our plugin icons were all pretty polished as images, and it was a real challenge to adapt them to 1-color while still retaining their personality. A lot of non-designers said this was a good change because everyone could just use the default set of new icons for all their post types. While this is great for people building simple plugins with no branding, we lose some serious branding in the dashboards of our customers if we start using the standard WordPress icons that any other plugins can use. So I designed some custom icons for our most popular plugins. I created a lot of versions of these at various weights to get the point of the icon across without losing all the personality of each logo, and without losing the clarity of the icon at 32px.
Here’s what I’ve done for BackupBuddy, Exchange and iThemes Security so far. I also did one for Builder, but I’m still working out some kinks on that one. It might not look like much, but a lot of effort (maybe a little too much) went into making these stand out and still manage to communicate our brand effectively.
I used the awesome icomoon.io to generate the icon font from SVGs. I’d like to eventually get some basic font creation software for using icon fonts more. But for this first use, icomoon.io was perfect. We use a single font for all our icons that we load as a git submodule in each of our plugins to keep them up to date and to not have to load 4 fonts if you run 4 of our plugins or themes at once (which many of our customers do).
It’s not the simplest solution, but it’s a really flexible one, since you can do a lot more with an icon font than an image. You can use CSS properties to style it just like text, so you can add text-shadows, change colors and use transitions easily. And all with less load than an image, especially if you use a lot of icons in a system. I’ve only used Symbolset as an actual icon font on the front-end of a site and I’ve liked it a lot. But I haven’t created any custom icon font sets yet for use on the front end of a project.
I learned recently that you can use any Dashicons as your custom post type icon by referencing it instead of an image file in your post type code.
This is the code that registers my portfolio post type “Work”. The menu_icon line shows I’m using the 'dashicons-images-alt2' icon for my projects. Super simple to implement for things that don’t need the level of branding consideration as our products at iThemes.
The line you need to look at:
'menu_icon' => 'dashicons-images-alt2'
The code that registers my Work post type.
function work_post_type() {
register_post_type( 'work',
array(
'labels' => array(
'name' => __( 'Work' ),
'singular_name' => __( 'Work' ),
'add_new_item' => __( 'Add new Work' ),
'edit_item' => __( 'Edit Work' ),
'new_item' => __( 'New Work' ),
'all_items' => __( 'All Work' ),
'view_item' => __( 'View Work' ),
'search_items' => __( 'Search Work' ),
'view_item' => __( 'View Work' ),
'menu_name' => __( 'Work' ),
),
'has_archive' => true,
'hierarchical' => true,
'public' => true,
'menu_position' => 6,
'rewrite' => array( 'slug' => 'work' ),
'menu_icon' => 'dashicons-images-alt2',
'supports' => array( 'title', 'thumbnail', 'editor', 'excerpt' ),
)
);
}