Thursday 8th January, 2015

Using a custom icon font for WordPress dashicons

There are number of tutorials out there on how to use WordPress’s built-in (from version 3.8) dashicons with your custom post type. But what if you want to use a completely custom icon font, such as those generated by Fontastic?

If you’re building a WordPress theme or plugin that has custom menus, custom icons for your new dashboard menu are a nice touch.

You’ve long been able to add custom images to your custom post type menu using the menu_icons parameter of register_post_type. And from WordPress 3.8, you’ve had the ability to use WordPress’s built-in dashicons icon font. But what if you want to use your own icon font, such as one generated by the fantastic Fontastic?

Let’s use the example of adding a new custom post type called ‘performance’ to a theatre company’s theme. I’m going to carry on using Fontastic, but you can easily adapt these instructions to any other custom icon font.

Grab a brew…

Go to Fontastic and spin up a new font. Click ‘modify font’ as we’ll need to give our icons a custom class:

Screen Shot 2015-01-08 at 11.49.13

There are two important bits here. First, your classes need to start with dashicons. This is because the menu_icon property will interpret anything that doesn’t start with dashicons as a URL (which we don’t want).

Second, we need some way to group our dashicons (such as theatre in this example) in order to distinguish them in CSS from the built-in dashicons. If we don’t do this, we’ll end up conflicting with WordPress’s built-in dashicons.

Select the icons that you’d like to include and click ‘customize’. I find that’s it’s useful to give the icons the same name as our custom post type – in this case, performance.

Screen Shot 2015-01-08 at 11.54.43

Click ‘publish’ and click ‘download’ under the ‘Install Manually’ section.

The downloaded zip is pretty useful – it has the generated font in a variety of formats, along with a stylesheet that links it all up.

Screen Shot 2015-01-08 at 12.00.52

Drop the ‘fonts’ folder into your theme. You’ll also want the styles.css file – but you’ll probably want to rename it so that it doesn’t conflict with your theme’s styles.css. I’ve renamed mine dashicons-styles.css. Drop this into your theme folder as well.

@charset "UTF-8";

@font-face {
font-family: "theatre-company";
src:url("fonts/theatre-company.eot?#iefix") format("embedded-opentype"),
url("fonts/theatre-company.woff") format("woff"),
url("fonts/theatre-company.ttf") format("truetype"),
url("fonts/theatre-company.svg#theatre-company") format("svg");
font-weight: normal;
font-style: normal;


[data-icon]:before {
font-family: "theatre-company" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

[class*=" dashicons-theatre-"]:before {
font-family: "theatre-company" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

.dashicons-theatre-performance:before {
content: "a";

This file is really handy – it’s saying if an element has a class that starts with dashicons-theatre-, use the font ‘theatre-company’. And, if it’s a performance (dashicons-theatre-performance), add the letter ‘a’ to the content (where the letter ‘a’ is mapped to the image of the hat in our font).

Now we’ll need to enqueue this style – but only if we’re in the dashboard. Here’s how it looks in this theme’s functions.php file:

// Add custom admin styles

function load_custom_admin_styles() {
wp_register_style( ‘custom_dashicons’, get_stylesheet_directory_uri() . ‘/dashicons_style.css’, false, ‘1.0.0’ );
wp_enqueue_style( ‘custom_dashicons’ );

add_action( ‘admin_enqueue_scripts’, ‘load_custom_admin_styles’ );

Now, we’ll need to register our custom post type. Here’s how it looks in this theme’s functions.php. Note that the menu_icon parameter is the same as the class that’s defined in dashicons_styles.css, in this case dashicons-theatre-performance.

add_action(‘init’, ‘cptui_register_my_cpt_performance’);
function cptui_register_my_cpt_performance() {
register_post_type(‘performance’, array(
‘label’ => ‘Performances’,
‘description’ => ”,
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘capability_type’ => ‘post’,
‘map_meta_cap’ => true,
‘hierarchical’ => false,
‘rewrite’ => array(‘slug’ => ‘performance’, ‘with_front’ => true),
‘query_var’ => true,
‘menu_icon’ => ‘dashicons-theatre-performance’,
‘supports’ => array(‘title’,’editor’,’excerpt’,’trackbacks’,’custom-fields’,’comments’,’revisions’,’thumbnail’,’author’,’page-attributes’,’post-formats’),
‘labels’ => array (
‘name’ => ‘Performances’,
‘singular_name’ => ‘Performance’,
‘menu_name’ => ‘Performances’,
‘add_new’ => ‘Add Performance’,
‘add_new_item’ => ‘Add New Performance’,
‘edit’ => ‘Edit’,
‘edit_item’ => ‘Edit Performance’,
‘new_item’ => ‘New Performance’,
‘view’ => ‘View Performance’,
‘view_item’ => ‘View Performance’,
‘search_items’ => ‘Search Performances’,
‘not_found’ => ‘No Performances Found’,
‘not_found_in_trash’ => ‘No Performances Found in Trash’,
‘parent’ => ‘Parent Performance’,
) ); }

And ta-da! A fancy hat to go along with our Performances post type.

Screen Shot 2015-01-08 at 13.37.49