'i' tag automatically converted to 'em' tag within Business Catalyst

Question

I'm having formatting / rewriting issues with a website I'm editing using Business Catalyst with Adobe.

Every time I populate a field with an icon, for example;

<div class="triangle left"><i class="icon-beaker"></i></div>

I save the file with their system administration panel, and it converts the icon class to em.

So the end result is

<div class="triangle left"><em class="icon-beaker"></em></div>

This removes the icon entirely.

Answer 1

Assuming you're using the HTML view of the WYSIWYG, instead use the Develop tab in the Business Catalyst back-end to edit HTML. Also, if you are using the old WYSIWYG editor, try updating it to the new version in your Partner Portal.

While it is sufficient to do all your editing in the Develop tab in the Business Catalyst back-end, using a text editor to edit your HTML content and an SFTP client to upload it are great ideas.

Answer 2

The problem appears that you're using the wrong tag. The <i> tag is for an alternative tone/voice, typically rendered in italics. It does not stand for icons. The Business Catalyst admin panel is converting the italics tag to an emphasis tag, <em>, as emphasis has historically been the preferred tag, and also usually presented in italics. See the specs for the <em> and <i> tags.

Additionally, according to this Adobe forum post, if you are using Font Awesome, the <i> tag doesn't have CSS rules, and <span> would be the preferred tag.

Thus, the correct markup would be:

<div class="triangle left"><span class="icon-beaker"></span></div>