Using an icon library in ServiceNow Content Management System

General Add comments
by:

(AKA: Help, we need more icons!)

Every now and then, you might need extra icons in the Content Management Section of Service Now.

In this sample, I show you how to use Font Awesome (http://fortawesome.github.io/Font-Awesome/), a library containing 0ver 400 icons (and growing). The advantage of a library like this is that it is actually a font, which is available after loading, saving a lot of bandwidth compared to icons in image files.

Using this in a ServiceNow CMS environment takes only a few steps to implement. Basically, we need these staps:
1. Make sure the font library is loaded in every page
2. Point to the correct location for the font library
3. Make sure you use the font 😉

To make sure we can take step #1, I assume you are using a (or only a few) layout files. In those XML file(s), add the following code:
image001
This code includes a record form the UI Script section named “Javascript_functions”. The extension is not in the name of the UI Script.

We assume this Javascript_functions contains at least this code:
image002

Basically, what happens here is we take the head section from the generated HTML and add an extra (externally hosted) style sheet to it. The style sheet we add contains the Font Awesome code we need. If a newer version becomes available, you need to update the code to connect to that version; otherwise you will remain using the current version.
In the Get Started section of the Font Awesome site you find the information about setting up a newer version (if available).

 

After taking step one and two, we are ready to use the icons in our site. In the samples section of the Font Awesome site you will find information of the displaying of the icons, sizing, stacking, rotating and flipping and even spinning!

You can place Font Awesome icons just about anywhere with the tag!
Here are some samples form the Font Awesome website:
image004

 

 

image006

 

 

Good luck with adding icons to your CMS!
.img[at].img

Leave a Reply