Introduction

Font Awesome (FA) is a popular internet icon library and toolkit. There are over 2,000 free and open source icons organized in different categories. 

These icons can help make your dashboard look nicer by adding them into other JavaScript components for Spotfire that uses these icons. 

This article contains two methods of installing FA. The first method assumes there are no firewall restrictions from your organization and that Spotfire can fetch resources from the Internet.

Method 1: Font Awesome for online use

This is the recommended method to use.

Step 1 - Add html placeholder

Create a Text Area and edit the text area in html mode and add a placeholder to insert Font Awesome reference files

html

 <div id="fontAwesome"></div>

Step 2 - Add JS File

Create a script that includes the Font Awesome libraries to replace the html placeholder. Replace the reference file with the latest version found in cdnjs.com/libraries/font-awesome and copy the link tag from the all.min.css file

JS 

linkTag = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>`
document.getElementById("fontAwesome").innerHTML = linkTag

Step 3 - Test Font Awesome

Add on the same or different Text Area some FA code to test the icons

<div id="fontAwesome"></div>
<h3>Font awesome test</h3> 
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-pen-nib"></i>
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-chart-line"></i>
<i class="fa-solid fa-chart-simple"></i>
<i class="fa-solid fa-chart-line"></i>
<i class="fa-solid fa-gear"></i>
<i class="fa-solid fa-helmet-safety"></i>
<i class="fa-regular fa-circle-question"></i> 
 
<h3>size test</h3>
<i class="fa-solid fa-coffee fa-2xs"></i>
<i class="fa-solid fa-coffee fa-xs"></i>
<i class="fa-solid fa-coffee fa-sm"></i>
<i class="fa-solid fa-coffee"></i>
<i class="fa-solid fa-coffee fa-lg"></i>
<i class="fa-solid fa-coffee fa-xl"></i>
<i class="fa-solid fa-coffee fa-2xl"></i>

Method 2: Font Awesome JavaScript file for offline use

This method of installing Font Awesome ensures availability even if there is no Internet connection or the host machine is unable to reach the content delivery network to fetch the FA resources dynamically. 

Warning! when using this method, the Font Awesome JavaScript library remains in memory even if the script is removed from the text area. Use with caution and make sure every page using FA has this script. Otherwise, if a user starts off on a page that requires FA but it is not, the icons will not show up unless the user goes to a page that has FA and then comes back to the page that does not.  The same thing happens with other JS Libraries.  To make sure every page work properly, always reload from Tools > Development > Refresh Browser or by pressing Ctrl+Alt+Shift+F5

Step 1

Create a JavaScript from File > Document Properties > Scripts > JavaScripts > New

Step 2

Get the latest version of Font Awesome from a content development network such as cdnjs.com and find the ../all.min.js file and copy the URL. For example:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js

JS (truncated example)

/*!
 * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
!function(){"use strict";var c.....

Step 3

Open the copied url and copy the contents of the file and paste it into the Script field from the Edit Script window. Name the file font-awesome.x.x.x.all.min.js replacing the x.x.x for the actual FA version number. Place the URL from where you got the FA file from as a reference.

Step 4: Test Font Awesome

Create a Text Area and edit the HTML. Replace replace the fa-xxxx for an icon of your choice. You can browse all the available icons from here

html

<h1><pre>
<li class="fa fa-cube"></li> Cube
<span class="fa fa-house"></span> Home
<span class="fa fa-bolt"></span> Flash
<li class="fa fa-gear"></li> Settings
<li class="fa fa-filter"></li> Filters
</pre></h1>

Save the text area before adding the the font-awesome.x.x.x.all.min.js