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

I've expanded on Ricardo's answer slightly and came up with a way to insert font awesome icons, here are the steps:

1.Go to the font awesome site and find the SVG of the icon you're looking for:

https://fontawesome.com/icons/sitemap?f=classic&s=solid

2.Add svg icon to tinyMCE:

editor.ui.registry.addIcon('iconName', '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z"></path></svg>');

3.Link the icon to the button:

                    editor.ui.registry.addButton('btn', {
                        text: 'Workflow Field',
                        icon: "iconName"
                    });

Output:

Answer 2

In TinyMCE v5, there's a new tinymce.editor.ui.Registry method called addIcon, that registers a new SVG icon, quoting:

Registers a new SVG icon, the icon name reference can be configured by any TinyMCE 5 Ui components that can display an icon. The icon is only available to the editor instance it was configured for.

---

Method Parameters:

addIcon(name: String, svgData: String)

• name (String) - Unique name identifying the new icon.
• svgData (String) - The SVG data string the browser will use to render the SVG icon.

---

Method Implementation:

// To add a simple triangle icon:
editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');

---

Then, you can use that unique name identifier in your custom buttons, for example:

editor.ui.registry.addButton('youtube', {
  text: 'Add Video' ,
  icon: 'triangleUp',
  onAction: () => {
    // do stuff here...
  }
});

---

Final Result:

Answer 3

For tinymce 5 you can use this sample:

editor.ui.registry.addButton('customButton1', {
    text: '<span class="fa fa-youtube"></span>',
    //icon: '<span class="icon-youtube"></span>',
    onAction: () => alert('Button clicked!')
});

Answer 4

The following CSS works for TinyMCE 4 and FontAwesome 5:

.mce-ico.mce-i-fas {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

Answer 5

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 6

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.

Answer 7

This simple stylesheet worked for me:

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

It can be used for a toolbar button or menu item equally well.

ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ }
}

ed.addMenuItem('youtube', {
     text: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ },
     context: 'view'
}

Do not use position: absolute because layout in menu will be spoiled.

Answer 8

From what I understand you trying to add a button with an image in the list of icons tinyMCE.

 tinymce.PluginManager.add("youtube", function (editor) {   
    editor.addButton('youtube', {
        tooltip: 'Add video',
        image: tinymce.baseURL + '/plugins/youtube/icons/youtube.gif',
        onclick: function() {

        }
    }); 
});

Create a folder (I named "youtube") in this folder create another folder (I named "icons" in which you put your image), then create your file youtube.js under youtube folder.