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

Comments

Yaplex - Freelance developer - white logo on black background

Yaplex is a custom software development company co-founded by full-stack .NET Software developer Alex Shapovalov who lives in Mississauga, ON and provides software development services in Mississauga and GTA.

Contact Information

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