Wygwam/CKEditor stripping out empty <i> tags (Font Awesome)

Question

There was an earlier post related to this, but its solution was outdated. So I'm creating a new one.

I am using ExpressionEngine 2.9.2 with Wygwam 3.3.2. Our site incorporates icons using FontAwesome 4.2. FontAwesome icons are called by inserting an <i> tag like <i class="fa fa-caret-down"></i>.

Wygwam, via CKEditor, strips out empty <i> tags by default. In the past, we have suppressed this default behavior by adding CKEDITOR.dtd.$removeEmpty['i'] = false; to CKEditor's config.js file.

However, after updating ExpressionEngine to 2.9.2 and Wygwam to 3.3.2, this approach no longer works (Yes, I added CKEDITOR.dtd.$removeEmpty['i'] = false; to the new config.js file). Empty <i> tags added in source mode are saved, but the next time the editor is initialized on that entry, all empty <i> tags are stripped again. Saving the entry again results in saving the "stripped" version, without the icons. The only way to get the icons back is to re-enter them every time an entry is edited. Not exactly a workable solution.

Any thoughts on how we can get back to preventing CKEditor from stripping those <i> tags?

If it matters, I am editing in Chrome 39.0.2171.27.

EDIT: Apparently it does matter. It appears to work correctly in Safari, Firefox and IE. It's broken only in Chrome. It work in IE, but is broken in Chrome? What is the world coming to? Anyway, I still appreciate any insight into this problem. Thanks.

Answer 1

We also had this issue, solution we used is:

The content editor removes empty icons when it loads. As a result, the icon needs to have some type of content inside it for the editor to leave it be. We can do this by adding a non-breaking space to the icon: <i class="fa fa-search fa-lg">&nbsp;</i>

Answer 2

This is most likely a dead issue by now, however, the solution may be applicable to another CKEditor installation you may have. Adding a non-breaking space can cause spacing problems -- the tag must be empty. the solution is to write the JS in your config file in a slightly different way:

CKEDITOR.dtd.$removeEmpty.i = 0;