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 <i> 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 <i> 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 <i> tag, it instructs TinyMCE to keep not empty <i> tags and consider them valid.
Now, if you try to save an empty <i> 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 <i> 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 <i> 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.
<i class="g-font-size-default fa fa-twitter"><!--fa--></i>
