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.

4 Replies to “Prevent WordPress TinyMCE Editor removing Font Awesome tags”

  1. Thanks for the tip Steve! The comment worked for me. It was driving me mad that this was being stripped out! I’m not keen on using the plugin but I might go for it just for ease of use.


  2. Almost worked for me but now i get –> rendered beside each icon. It’s baffling.

    using Font awesome 5 pro SVG


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: