How to change the "Remove Formatting" button face for TinyMCE 4

Question

The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is

.

I'm not sure how that gets that Tx symbol on the button, but there it is.

Thanks for any help.

Answer 1

In skin.min.css change

.mce-i-removeformat:before {
   content: "\e01d"; 
}

to something like

.mce-i-removeformat:before {
    background-image: url("http://i.stack.imgur.com/0rzf2.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

You can probably remove the background-size and background-repeat if you make your image the right size

If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon

Answer 2

These icons come from the tinymce font. for me in the tinymce source i have the fonts at

tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc

If you added your own font file withyour own icon it should allow you to change the icon

If you inspect the css you'll notice there are two parts that control the icons being used

On the ::before inside the tag

.mce-i-italic:before {
    content: "\e02b";
}

on the i tag itself

.mce-ico {
     font-family: tinymce, Arial
}

both comefrom skin.min.css

Answer 3

What do you say that instead of new image you use :after pseudo element and remove :before one.

This is how it would look

https://jsfiddle.net/nj6yn4bq/4/

And the code

<button><i></i></button>

i:before { display: none; }
i:after {
    content: 'FMT';
    text-decoration: line-through;
    font-style: initial;
    font-size: 15px;
}

button { 
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);

}