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.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.
Source Examples, 3.0 vs 4.0
TinyMCE 3
TinyMCE 4
To style the icons using the Dashicons CSS files that are already loaded in the WP dashboard requires adding some extra CSS. In the latest beta of WordPress (3.9), TinyMCE 4.0 is used so I’m not sure this will work on earlier versions (however a modified version may suit, adjusting for the different classes outputted by previous TinyMCE buttons). In WP 3.9 (and TinyMCE 4.0), icons on the editor are outputted e.g.
There are 2 stages, first add a function to enqueue a custom stylesheet into the WP admin (which will be used to style the new buttons).
Then secondly, following the James Koster’s guide on using Dashicons, a simple css selector of
:before
can applied to your icons CSS class. In the example case in the original question the CSS class would bemce-i-dropcap
Though be sure to also remove the call to add an image in the original JS
ed.addButton
function and the font icon will be used insteadNote that the
admin_enqueue_scripts
function will be called on every admin page so if your custom stylesheet is large it could slow down load times (though a minified stylesheet with only icon definitions in isn’t likely to have a large impact on load times anyway).An easy solution is to use Base64 encoded SVG image like this
Where
{{BASE}}
is the SVG image encoded with Base64.I use these pre-installed Linux command to download the SVG from Github abd encode it (using twitter icon as example):
Output:
Here’s your easy solution (hopefully this will help other people too):
1) add a custom class for icon, in this example “myicons”
2) Enqueue your admin stylesheet file
3) Then in your custom_admin_style.css file add this: