TinyMce removes font awesome icons in Umbraco 8

When you try to add Font Awesome icons to the rich text editor in Umbraco, you notice that the icons getting removed from the editor, even editing HTML source, do not help to show Font Awesome icons.

Why does Umbraco editor discard Font Awesome icons?

The reason for this unexpected behavior is withing the TinyMCE editor, which Umbraco uses for rich text editor support.

TinyMCE does not support empty  tags, but there are a couple of ways to fix it.

Configuring TinyMCE to allow Umbraco use Font Awesome icons

The first way to fix this is by configuring TinyMCE and allowing the empty  tags. For this, you need to modify validElements in the tinyMceConfig.config and add the following to allow empty tags:

-em[class|style],#i[class|style]

notice the # in front of the  tag, it instructs TinyMCE to keep not empty  tags and consider them valid.

Now, if you try to save an empty  tags, TinyMCE adds space, and the Font Awesome icon is going to be visible on the UI.

In most cases, this solution is sufficient, but if you have a circle around the icon, you notice that the icon is not centered, that is because of the space character which you now have between  tag, it moves the icon to the left of the circle.

The best way to use Font Awesome icons with TinyMCE in Umbraco

There is another solution to this problem, which I like much better. First, it does not require any configuration, and second, it does not introduce any issues on the UI.

If you add a comment inside  tag, the TinyMCE editor is no longer considering it empty and not going to be removed. And obviously, the use of comment does not affect UI so that the icon going to be displayed correctly.

comparation of using non breakable space and comment to fix Font Awesome in TinyMCE