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?

Babu

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

Babu

@msqar, just go to fortawesome.github.io/Font-Awesome/icons and do "inspect element" on an Icon, then look for the ":before" element in the html and check that element's styling. – Babu

Note that you need to put double quotes around the [FONT-AWESOME-CONTENT]. I've edited the answer to include them. – Coombs

As of TinyMCE 4.3 its no longer font awesome. I think it's icomoon now. – Debrahdebrecen

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.

Cinchonidine

Answer 3

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.

Cortie

thank you for your time. as I mentioned above I was trying to use a custom font-face icon as opposed to using an image file directly. the solution above did it. – Babu

Answer 4

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:

Shaker

Answer 5

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!')
});

Anatolio

For me works: <i style="font-family:FontAwesome" class="fa fa-users"></i> – Ician

Answer 6

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.

Beerbohm

Answer 7

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

Gitt

Answer 8

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:

Epigraph