How to use dashicons or icons in WordPress meta box?

Question

How do I get dashicons to work in a WordPress meta box? I want to do something similar to the calendar icon that is in the "Publish" meta box next to "Published on".

I have no trouble at all using them as the icon for the custom post type and in the "At a glance" on the dashboard.

This is what I am doing:

#time_control_area #expire:before {
    content: "\f235";
    top: -1px;
}

And this is my result:

I have tried to enque the dashicons styles which has not worked. I cannot find good documentation anywhere on how the dashicons work with WordPress.

Answer 1

Inspecting the back end of one of my sites, the styling for each of the :before tags that show the WP-default icons seems to be hard coded into wp-admin\load-styles.php.

It looks like you'll need to manually add font: 400 20px/1 dashicons; and possibly some of the other rules to your css to get this to work. Alternately, you could try applying one of the classes WP uses your menu item.

Full css I see for the WP-default icons:

#post-body #visibility:before, #post-body .misc-pub-revisions:before, 
.curtime #timestamp:before {
   font: 400 20px/1 dashicons;
   speak: none;
   display: inline-block;
   padding: 0 2px 0 0;
   top: 0;
   left: -1px;
   position: relative;
   vertical-align: top;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-decoration: none!important;
}