4

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.

Herb
  • 636
  • 1
  • 15
  • 29
Tom Hutchison
  • 73
  • 1
  • 1
  • 6
  • Here's the working code, if you look at the class triangle sections with little icons https://web.archive.org/web/20170221024730/http://www.justprintingdesign.com.au/ & here's without the icons showing http://www.justprintingdesign.com.au/ – Tom Hutchison Jul 03 '17 at 07:45

2 Answers2

13

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.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Alex Steinberg
  • 1,426
  • 13
  • 25
0

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>
Herb
  • 636
  • 1
  • 15
  • 29
  • The tag used here is likely to show an icon from for example font awesome – mplungjan Feb 18 '18 at 10:30
  • 1
    Why would you be quoting W3.org with HTML4.01, rather than HTML5, and W3Schools, at all? Here are the relevant specs: [``](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element), [``](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element). Replacing a FontAwesome icon’s `` with `` is most certainly _not_ the correct markup. – Sebastian Simon Feb 18 '18 at 11:25
  • @Xufox I haven't used HTML in a long time, so used references that were familiar to me. I know that `` is most certainly not a tag that stands for icon. I've updated the answer with your links, and a link to an Adobe forum post on this exact issue. – Herb Feb 19 '18 at 05:43
  • Good post find from Adobe forums Herb. Thanks. You need to edit your original comment as the – Tom Hutchison Feb 19 '18 at 21:27