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);
}
});