adding a custom icon to a tinyMCE button

Question

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?

Answer 1

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

Answer 2

I know this is old, but I thought I would throw in my answer for anyone who is interested. I am using TinyMCE 4. I added this to my CSS

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

then when I am setting the icon for the buttons I just use.

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

basically this will let you use any font awesome icons without having to have a specific class layout for each icon.

Hope this helps someone.