How to insert icons using an empty tag

[chingkit]

I have some fontawesome icon in some paragraphs, but i found that the icon will not show if the i tag has empty content, for example

<p><i class='fas fa-edit'></i>abacdafsd fasdf asdf asdf sdf</p> the icon will not show when in edit mode.

<p><i class='fas fa-edit'>some content</i>abacdafsd fasdf asdf asdf sdf</p> the icon will show but also the string 'some content'.

Also, if i run the following code in custom tool

             var tip = element.content.substring(0, selection.get()[0])
             var tail = element.content.substring(selection.get()[1])
             var icon = new HTMLString.String('<i class="fas fa-edit"></i>', element.content.preserveWhitespace())

             element.content = tip.concat(br, tail)
             element.updateInnerHTML()
             element.taint()     

Is it because the i tag has empty content so the icon will not show?

[chingkit]

Here is a Codepen example https://codepen.io/anon/pen/aYBYWK

[anthonyjb]

Hi @chingkit - this is down to HTMLString (the HTML parser at the root of CT) which does not support empty tags, I've had a similar issue previously and typically take this approach:

<i class='#{ icon.cssClass() }' data-config='icon'>&#8203;</i>

Here an zero width space character is used as content.