How to use the new Dashicons for custom TinyMCE buttons?

I’ve been following a tutorial on Tuts+ (linked from the WordPress Codex) on how to interact with the TinyMCE editor to add buttons. Following the example code on that article, I have a JS file which adds the buttons to TinyMCE. The relevant snipped of JS that adds the icon is:

ed.addButton('dropcap', {
    title : 'DropCap',
    cmd : 'dropcap',
    image : url + '/dropcap.png'
});

Now this was fine pre WP 3.8, however since Dashicons were introduced it looks outdated to use static PNG’s for TinyMCE buttons… Since 3.8 I’ve updated my custom post types to use Dashicons, but was wondering what is the correct way to get TinyMCE buttons using Dashicons as well? There’s a handy guide from James Coster on how to use Dashicons which may be relevant (though I assume there’s no need to place calls to enqueue the Dashicons scripts as they’ll already be loaded in the back-end).

Add Dashicon

All buttons inside the TinyMCE have a class, also your custom button. Include (use wp_enqueue_style() a stylesheet with styling with Dashicons, like the follow example.

.myicon:before {
    content: '\2605';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
}

On default is the Dashicon active on each edit page, but add the dashicon to the depends stylesheet and it was also includes.

Helper

See this plugin to find the right font, how tos and examples to include inside the WordPress back end.

TinyMCE and WordPress 3.9

Small hint from my side to develop on this topic. The next release of WP 3.9 have the TinyMCE 4.0* include with a new API and the Tuts Tutorial is not the best resource for find solutions in this topic. See the follow two links and check you current developemt with the WP 3.9-beta.

• Trac Ticket 24067
• Migration guide from 3.x
• TinyMCE Fiddle
• TinyMCE API 4.0
• Default TinyMCE Plugins in WP Core
• TinyMCE Fonts, include in Core, use default Buttons

Source Examples, 3.0 vs 4.0

TinyMCE 3

  tinyMCE.onAddEditor.add(function(mgr, ed) {
    var editor = $('#' + ed.editorId + '.atjs');
    if (editor.length == 1) {
      ed.onInit.add(function(ed, l) {
        $(ed.contentDocument.activeElement).atwho({settings go here});
      });
    }
  });

TinyMCE 4

tinymce.init({
  selector: "#mce",
  init_instance_callback: function(editor) {
    $(editor.contentDocument.activeElement).atwho(at_config);
  }
});