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 "List of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must not be available in the WYSIWYG mode for editing." So this keeps the tags intact because source mode of CKEditor does not get HTML validation, whereas the WYSIWYG mode does.</i[^>