Configure TinyMCE for use of Font Awesome icons in

Question

I use Composite C1 CMS, but the custom TinyMCE in it is so crazy. Simple issue: we'd like to use Font Awesome icons. Source code editing is OK. If we add the following:

<i class="fa fa-bus"></i>

This is removed. OK then, add a space:

<i class="fa fa-bus">&#160;</i>

i is converted to em.

If I change valid_elements in config in the file visualeditor.js, nothing happens, still the same problem.

Are there any solution for this issue? Anyway it would be nice to add a button to the toolbar 'add icon'.

Answer 1

The accepted answer uses  , but this will create a gap next to your icon causing it to be slightly offset. A better alternative is to use a comment:

<i class="fa fa-bus"><!-- icon --></i>

Now TinyMCE won't cleanup the "empty" element and you won't have a gap, but it will still convert your <i> to <em>. To prevent this, add the following to your TinyMCE init:

tinymce.init({
  // ...
  extended_valid_elements: 'i[class]'
});

TinyMCE Icon Fonts Plugin

The icon font dilemma has been a problem for years, so I finally wrote a plugin to solve it with minimal effort. The plugin:

• Prevents TinyMCE from converting icons into elements
• Prevents TinyMCE from removing empty icons
• Makes icons selectable so you can copy/paste/delete them easier
• Let's you configure the CSS selector used to identify icons font elements

If you don't want to use the plugin, feel free to dive into the source to see exactly what's going on under the hood.

Cheers!

Answer 2

TinyMCE will remove empty elements by default, so you add a   between your tags to tell the TinyMCE it's not empty. Also <i> used to be Italic in older versions of HTML so it's trying to convert an old italic tag into a preferred <em> Emphasis tag. Really though, you can use any tag with Font Awesome so to fix this issue, just change your <i> to a <span>:

<span class="fa fa-bus">&nbsp;</span>

Answer 3

I know it's an old question but I want to add my two cents here.

As we all know, TinyMce strips out <i></i> so we have to find a way to bypass this problem. A fast way I use in such cases is to replace <i></i> with <span></span> as Howdy_McGee mentioned before me.

So, to summarize, in your example instead of using:

<i class="fa fa-bus"></i>

you can just use:

<span class="fa fa-bus">&nbsp;</span>.