How use Font Awesome icons in SharePoint ItemStyle.XSL?

Question

In SharePoint 2019, I am trying to use font awesome icons in ItemStyle.XSL that not work as expected and my design is broken!

below, I need to use a font awesome icon before the title in item style.

<h2><i class="far fa-address-book"></i><xsl:value-of select="@Title" /></h2>

I didn't get any errors in the item-style syntax. however, the design is crashed! and I don't know What am I doing wrong?

Please, help me to know What's the correct way to use Font Awesome icons in ItemStyle.XSL in SharePoint 2019/2016?

Answer 1

Using Font Awesome icons in ItemStyle.XSL in SharePoint

In SharePoint ItemStyel.XSL, you can normally use Font Awesome icons in ItemStyle.XSL file. However, I have noted that

• Font Awesome icons tags <i> is not a valid HTML element,
• In general, any tags in ItemStyle.XSL that need an independent close tag should contain a value.

Ex: if you have typed <h2></h2> without writing content inside the heading tag, you may have a problem with your design and may become broken!
To avoid that, the <h2> tag should have content inside it like this <h2>My heading 2</h2>

So in your case, the Font Awesome tag should have content inside it to avoid broken design and to render HTML code properly.
To do that, I would prefer to use comment in XSL as below:

<h2>
 <i class="far fa-address-book">
	<xsl:comment>.</xsl:comment>
 </i>
 <xsl:value-of select="@Title" />
</h2>

As you can see, the Font Awesome icon <i> tag has content inside it, and your HTML should be rendered successfully now.