2

I have created a custom button for TinyMCE and I would like it to use the Twitter icon from dashicons. I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

Here is my current(non-working) attempt:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'dashicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();
1

Here's your easy solution (hopefully this will help other people too):

1) add a custom class for icon, in this example "myicons"

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'myicons dashicons-twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Enqueue your admin stylesheet file

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Then in your custom_admin_style.css file add this:

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
2

I am hoping to be able to do this just through the Javascript with no additional CSS. Is this possible?

I assume you only want to stay within tinymce.PluginManager.add( ... ).

Here's a JS workaround with:

jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );

within a onPostRender event callback:

(function () {
    tinymce.PluginManager.add('twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_tweet_button', {
            title: 'Insert tweet',
            icon: 'insert-tweet is-dashicon dashicons dashicons-twitter',
            onPostRender: function () {
                jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );
            },
            onclick: function() {
                ...
            }
        });
    });
})();

that will generate the tag:

<i class="mce-ico mce-i-insert-tweet 
          is-dashicon dashicons dashicons-twitter" style="font-family: dashicons;"></i>

Example:

twitter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.