Search code examples
javascriptangularjspluginstinymce

adding a custom icon to a tinyMCE button

I'm trying to add a Font-Awsome icon to a button I added to tinyMCE thus:

 ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

using an image like the docs suggest was not acceptable but for some reason I am not able to make this work. any ideas?

Solution

  • this CSS based solution seems to work nicely:

     i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: "[FONT-AWESOME-CONTENT]";       // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 1.5em;
    padding-right: 0.5em;
    position: absolute;
    top: 15%;
    left: 0;
 }

    it is based on matt-royal's answer on this stack exchange wordpress thread