• Home /
  • Blog /
  • TinyMce removes font awesome icons in Umbraco 8
Umbraco Font Awesome Tinymce

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 <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.

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

<i class="g-font-size-default fa fa-twitter"><!--fa--></i>

Alex Shapovalov

Alex Shapovalov is a founder of Yaplex - an IT consulting and software development company, located in Mississauga, Ontario. Alex provides IT consulting and .NET software development services in Canada and the USA.

Yaplex - Freelance developer - white logo on black background

Yaplex ® is a custom software development company located in Mississauga, Ontario. Yaplex was founded in 2013 and provides website development, mobile development, and custom .NET software development services.

Contact Information

Mississauga, ON, Canada
Phone: +1 647 328 3809
Email: alex@yaplex.com