Remove CKEditor toolbar button icon's  

Question

I am using the inline editor.

The toolbar button icons have this markup:

<span class="cke_button_icon cke_button__bold_icon">&nbsp;</span>

Notice the &nbsp in the span. This is extremely annoying as it makes it almost impossible to center the icon because I am using font awesome for the icons.

Is there a setting somewhere where we can ask CKEditor to not insert the  ?

Answer 1

After a bit of testing, I came up with a CSS approach to deal with this.

I think CKEditor inserts the &nbsp to adhere to WCAG guidelines (didn't really spend too much time looking into this).

The markup for the whole button looks like this:

<a onclick="CKEDITOR.tools.callFunction(2,this);return false;" onfocus="return CKEDITOR.tools.callFunction(1,event);" onkeydown="return CKEDITOR.tools.callFunction(0,event);" onblur="this.style.cssText = this.style.cssText;" aria-disabled="true" aria-haspopup="false" aria-labelledby="cke_8_label" role="button" hidefocus="true" tabindex="-1" title="Undo" class="cke_button cke_button__undo cke_button_disabled " id="cke_8">
  <span style="" class="cke_button_icon cke_button__undo_icon">&nbsp;</span>
  <span aria-hidden="false" class="cke_button_label cke_button__undo_label" id="cke_8_label">Undo</span>
</a>

What I did is to position the icon in such a way that it overlaps the space created by the nbsp (I am using SCSS, so I can insert the font awesome icons using @extend):

.cke_button{
  position: relative; //Relative so that any absolute children are positioned relatively to this container
  width: 16px;
  padding: 5px;
}

.cke_button_icon{
  @extend .fa;
  text-align: center;
}

.cke_button_icon{
  position: absolute; //Position absolutely relative to parent
  width: 16px;
}

.cke_button__undo_icon{
    @extend .fa-undo;
}