Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
1.3k views
in SharePoint Server by 24 34 39

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?

use Font Awesome icons SharePoint ItemStyle.XSL

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


1 Answer

1 like 0 dislike
by 96 166 336
selected by
 
Best answer

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.

If you don’t ask, the answer is always NO!
...