CKEditor strips <i> Tag

I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any <i> tag from previously inserted content to the db.

Case:

I insert html content to the db, some content contain the <i> elements. I do this with the CKEditor. Everything works perfect and the content shows up on the webpage. But when i want to edit the previously inserted content, the <i> elements are missing.

In my specific case i use:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Of course if i disable the editor, the content shows up just fine in the textarea.

When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty

For example, I added the following to the config.js

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.

I found the solution for this specific problem i ran into with the <i> tag

The original answer i got from drupal forum

The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

Thanks to Spasticdonkey for pointing me to the link.