Enhancing Your Service Portal and Forms with Updated FontAwesome Icons

As a fan of icons, I particularly love FontAwesome. So, I was happy to discover while building our Service Portal that it comes with FontAwesome 4 built in. However, with the release of newer versions of FontAwesome, we’ve gained access to a wider variety of icons that aren’t available on the platform by default. Fortunately, you can easily integrate the CSS for these newer versions into your portal theme, bringing a fresh array of icons to your project.

One important note: the built-in icon pickers in ServiceNow only recognize icons known to the platform, meaning new icons must be added manually in HTML or code. Additionally, be sure to include the shims CSS file to ensure compatibility with icons still using the old names in the platform.

In our example, we opted for FontAwesome 5 Pro due to our license and to maintain compatibility with some older browsers, which aren’t supported by FontAwesome 6.

Service Portal

We began by adding the FontAwesome and shims CSS files to our portal theme record. Ensure the CSS file you use includes WOFF fonts embedded as base64 for compatibility, rather than WOFF2.

We used this as a base, which includes FontAwesome 5 Free: https://github.com/keithorbit/font-awesome-base64

First, add the brands font.

Then, include the desired font for ‘FontAwesome 5’ or ‘FontAwesome 5 Pro’; in our case, we chose the ‘Solid’ font. There is an additional CSS snippet needed to prioritize the newer version.

.fa::before,
.fas {
    font-family: 'Font Awesome 5 Pro','Font Awesome 5 Brands' !important;
    font-weight: 900;
}

With these steps, our portal transformed from this:

To this:

Form View

We also wanted to incorporate new icons into some of our forms. This proved to be more challenging, but we succeeded by using the free version of FontAwesome and sourcing the CSS files directly from a CDN.

Create a new UI Macro, we’ve called ours uob_fontawesome. In it, include the CSS files:

Then, we need to add the CSS to a part of the form. Since the ‘Reference Number’ field is typically present on the forms where we wanted to use icons, we added the CSS as a reference contribution to that field.

Now, the new icons can be used seamlessly on our task and child table forms where the reference number field is visible.

I hope you find this guide useful. While we await the day when the full selection of FontAwesome 5 or 6 icons is available directly within ServiceNow, this method should satisfy your icon needs for now!

Related Posts