CKEditor 3.x is stripping out font awesome tags

Took a little bit of digging because a lot of the solutions were related to different versions of CKEditor. I finally came across a solution on stackoverflow.

Add this to your CKEditor config.js file and the font awesome tags will stick around.

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

What the answer doesn't say is why this works though. If you look at the documentation it says that what you push into protectedSource is "<span style="color: #000000;">List of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must</span> not <span style="color: #000000;">be available in the WYSIWYG mode for editing." So this keeps the <i> tags intact because source mode of CKEditor does not get HTML validation, whereas the WYSIWYG mode does.</span></i[^>

If you have any feedback for me, I'd love to hear it - corrections, alternative paths, you name it! Send me an email levi@levijackson.xyz