Prevent WordPress TinyMCE Editor removing Font Awesome tags

Having recently built a custom WordPress theme making use of the icon font Font Awesome, I came across an issue where the icon tag would be stripped from the TinyMCE editor.

Using the standard markup provided on the Font Awesome pages (Gamepad), the tag would be removed when alternating between Text and Visual editing mode.

<i class="fa fa-gamepad"> fa-gamepad

The first idea was to include a none-breaking space within the tag to provide some content within the tag and thus not empty.

<i class="fa fa-gamepad"> 

This does however have some drawbacks, including offsetting the icon and inconsistently being removed in the editor.

The second, more stable solution was to use a html comment tag, this doesn’t have the side effect of visually outputting any extra markup as per the previous option.

<i class="fa fa-gamepad"><!-- icon --></i>

This methos fully preserves the <i /> tag, without having to add any special TinyMCE rules or exceptions.

Other options include making use of the Font Awesome WordPress plugin, which includes the ability to use shortcodes in the editor to render icons.

Note: In this instance, the stylesheet for Font Awesome was directly embedded into my theme, instructions for this can be found on the Get Started page.