Configure TinyMCE to Use Font Awesome Icons in Composite C1
I am using Composite C1 CMS but the custom TinyMCE is so crazy in it. Simple problem: we would like to use Font Awesome icons. Source code editing is fine. If we add the following:
<i class="fa fa-bus"></i>
This is deletion. So add a space:
<i class="fa fa-bus"> </i>
i is converted to em .
If I change the valid_elements in config in visualeditor.js, nothing happens, still the same problem.
Is there a solution for this problem? It would be nice to add a button to the "add icon" toolbar anyway.
source to share
TinyMCE removes empty elements by default, so you add
between your tags to tell TinyMCE that it is not empty. Also, <i>
in older versions the HTML was italicized, so it tries to convert the old italic to <em>
Emphasis tag . In fact, you can use any tag with Font Awesome, so to fix this problem, just change <i>
to <span>
:
<span class="fa fa-bus"> </span>
source to share
I know this is an old question, but I want to add my two cents here.
As we all know, TinyMce excels <i></i>
, so we need to find a way around this issue. A quick way that I use in such cases is to replace <i></i>
with <span></span>
as above as stated in Howdy_McGee.
So to summarize in your example instead of using:
<i class="fa fa-bus"></i>
you can just use:
<span class="fa fa-bus"> </span>
...
source to share
The accepted answer is used
, but this will create a space next to your icon, causing it to be slightly offset. The best alternative is to use a comment:
<i class="fa fa-bus"><!-- icon --></i>
Now TinyMCE will not clear an "empty" element and you won't have a space, but it will still convert yours <i>
to <em>
. To prevent this, add the following to your init-TinyMCE:
tinymce.init({
// ...
extended_valid_elements: 'i[class]'
});
TinyMCE Icon Fonts Plugin
The font icon dilemma has been a problem for years, so I finally wrote a plugin to solve it with minimal effort. Plugin:
- Prevents TinyMCE from converting icons to elements
- Prevents TinyMCE from removing empty icons
- Makes icons for selection so you can copy / paste / delete them easier
- Allows you to customize the CSS selector used to identify icon 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.
Hooray!
source to share