Last year, WordPress moved to using plugins for working on new features for core. One of the first ones to appear was the MP6 plugin. It was a complete redesign of the WordPress admin. One of the changes was moving from using images to an icon font, Dashicons.
In WordPress 3.8, we saw this new design make its way into core. All of the icons in the WordPress admin are now using Dashicons and we too can use them in our themes and plugins.
Dashicons
The project is an open source project and is currently maintained on GitHub. WordPress pulls it in and you can also use it for your own projects as well. You can see all of the icons in the documentation as well.
You can click on each icon and it will show you a larger preview of each and display the name of the icon. There are also some links that help you be able to copy the CSS, HTML, or Glyph. There's also a link at the bottom to Show instructions.
Using Dashicons for Menu Items
Let's say your theme adds a custom post type for an image slider. We want to use an icon that looks like some images and decide to use dashicons-images-alt2.
Now we just need to specify it when we register our custom post type like so:
register_post_type('slides',
array(
'labels' => array(
'name' => 'Slides',
'singular_name' => 'Slide'
),
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-images-alt2'
)
);
Now our custom menu item has the same styling as the other default menu items. It has the same color and height along with all the appropriate color on hover.
Issues and Requests
If you find any issues using one of the dashicons, make sure to log an issue in Core Trac like you would any other WordPress issues. If you don't find an icon that suits your purposes, you can request a new one.
Conclusion
Like I mentioned before, now that Dashicons is included in WordPress core, we can utilize it in our themes and plugins.
We can easily use them for the menu items that we add to the WordPress admin menu. This is definitely one of the small touches that can make your work feel more native to the core WordPress application.
Comments