Question

160

adding a custom icon to a tinyMCE button

rated 0 times [ 165] [ 5] / answers: 1 / hits: 31210 / 10 Years ago, thu, august 7, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

samir

Add To Favorites

Follow

Total Points: 145

Total Questions: 90

Total Answers: 89

Location: Tokelau

Member since Sun, May 7, 2023

1 Year ago

samir questions

1 What does `import type {Node} from 'react';` and usage in App: () => Node

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Updating state in useEffect after every second for 10 seconds

Sun, Jun 13, 21, 00:00, 3 Years ago

1 How to use the react hook useMemo with asynchronous functions?

Sun, Dec 13, 20, 00:00, 4 Years ago

1 Best way to check status code of http response?

Mon, Apr 27, 20, 00:00, 4 Years ago

1 camera.takePictureAsync(options) is not a function in react native camera

Sun, Sep 22, 19, 00:00, 5 Years ago

View All

answered 10 Years ago ayleen · Accepted Answer

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