Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Embed Font Awesome Icons in Knowledge Base Articles

Thomas Bohan
Tera Contributor

Is there a way to embed Font Awesome Icons in a HTML based Knowledge Base Article please

I've tried adding code like

<i class="fas fa-info-circle"></i> This is an info icon.

but it gets removed.

11 REPLIES 11

Thomas Bohan
Tera Contributor

Here is an example of the HTML I'm trying to add:

Before
-------------
<html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/></head></html><p><strong><span style="font-size: 18pt;">Create An Email Signature</span></strong></p>
<p><i class="fa fa-envelope" style="margin-right: 8px;"></i>To create a personalized email signature:</p>
<ol>
<li>Open a new message. On the <strong>Message</strong> tab, in the <strong>Include</strong> group, click <strong>Signature</strong>, and then click <strong>Signatures</strong>.</li>
<li>On the <strong>E-mail Signature</strong> tab, click <strong>New</strong>.</li>
<li>Type a name for the signature, and then click <strong>OK</strong>.</li>
<li>In the <strong>Edit signature</strong> box, type the text that you want to include in the signature.</li>
<li>To format the text, select the text, and then use the style and formatting buttons to select the options that you want.</li>
<li>To add elements besides text, click where you want the element to appear, and then do any of the following:</li>
</ol>
<table border="1" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td>
<p><i class="fa fa-sliders-h" style="margin-right: 8px;"></i><strong>Options</strong></p>
</td>
<td>
<p><i class="fa fa-question-circle" style="margin-right: 8px;"></i><strong>How to</strong></p>
</td>
</tr>
<tr>
<td>
<p><i class="fa fa-id-card" style="margin-right: 8px;"></i>To add an electronic business card</p>
</td>
<td>
<p>Click <strong>Business Card</strong>, and then click a contact in the <strong>Filed As</strong> list. Then click <strong>OK</strong></p>
</td>
</tr>
<tr>
<td>
<p><i class="fa fa-link" style="margin-right: 8px;"></i>To add a hyperlink</p>
</td>
<td>
<p>Click <strong>Insert Hyperlink</strong>, type in the information or browse to a hyperlink, click to select it, and then click <strong>OK</strong></p>
</td>
</tr>
<tr>
<td>
<p><i class="fa fa-image" style="margin-right: 8px;"></i>To add a picture</p>
</td>
<td>
<p>Click <strong>Picture</strong>, browse to a picture, click to select it, and then click <strong>OK</strong>. Common image file formats for pictures include .bmp, .gif, .jpg, and .png.</p>
</td>
</tr>
</tbody>
</table>
<ol>
<li>To finish creating the signature, click <strong>OK</strong>.</li>
</ol>
<h4>NOTE:</h4>
<p><i class="fa fa-info-circle" style="margin-right: 8px;"></i>The signature that you just created or modified won't appear in the currently open message; it must be inserted into the message.</p>


-----------------------
However after I added it it strips out all the Font Awesome Inco references within my content when I save it in the html editor editor as part of the article body.

After
--------------
<p><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"></p>
<p><strong><span style="font-size: 18pt;">Create An Email Signature</span></strong></p>
<p>To create a personalized email signature:</p>
<ol>
<li>Open a new message. On the&nbsp;<strong>Message</strong>&nbsp;tab, in the&nbsp;<strong>Include</strong>&nbsp;group, click&nbsp;<strong>Signature</strong>, and then click <strong>Signatures</strong>.</li>
<li>On the&nbsp;<strong>E-mail Signature</strong>&nbsp;tab, click&nbsp;<strong>New</strong>.</li>
<li>Type a name for the signature, and then click&nbsp;<strong>OK</strong>.</li>
<li>In the&nbsp;<strong>Edit signature</strong>&nbsp;box, type the text that you want to include in the signature.</li>
<li>To format the text, select the text, and then use the style and formatting buttons to select the options that you want.</li>
<li>To add elements besides text, click where you want the element to appear, and then do any of the following:</li>
</ol>
<table border="1" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<td>
<p><strong>Options</strong></p>
</td>
<td>
<p><strong>How to</strong></p>
</td>
</tr>
<tr>
<td>
<p>To add an electronic business card</p>
</td>
<td>
<p>Click&nbsp;<strong>Business Card</strong>, and then click a contact in the&nbsp;<strong>Filed As</strong>&nbsp;list. Then click&nbsp;<strong>OK</strong></p>
</td>
</tr>
<tr>
<td>
<p>To add a hyperlink</p>
</td>
<td>
<p>Click&nbsp;<strong>Insert Hyperlink</strong>, type in the information or browse to a hyperlink, click to select it, and then click&nbsp;<strong>OK</strong></p>
</td>
</tr>
<tr>
<td>
<p>To add a picture</p>
</td>
<td>
<p>Click&nbsp;<strong>Picture</strong>, browse to a picture, click to select it, and then click&nbsp;<strong>OK</strong>. Common image file formats for pictures include .bmp, .gif, .jpg, and .png.</p>
</td>
</tr>
</tbody>
</table>
<ol>
<li>To finish creating the signature, click&nbsp;<strong>OK</strong>.</li>
</ol>
<h4>NOTE:</h4>
<p>The signature that you just created or modified won't appear in the currently open message; it must be inserted into the message.</p>

Thomas Bohan
Tera Contributor

I line example would be

<p><i class="fa fa-envelope" style="margin-right: 8px;"></i>To create a personalized email signature:</p>

becomes

<p>To create a personalized email signature:</p>

I tested in my end but it remains the same..

KamilTEL_0-1751470001674.png

 



Try to read this, if it might help you:
https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0957850

 

Or you can try to play around with UI Properties, there are some options for fonts:

(no direct experience)

KamilTEL_1-1751470169572.png

 

_____
No AI was used in the writing of this post. Pure #GlideFather only

Thomas Bohan
Tera Contributor

This is what it should look like (with the icons)

ThomasBohan_0-1751470000234.png

 

ahaaa and are you able to copy/paste the icons or are these little pictures?

_____
No AI was used in the writing of this post. Pure #GlideFather only