Missing Font-Awesome Icons in System Status Page Widget after Jakarta Upgrade

codechaser · ‎03-26-2018

After our most recent upgrade from Istanbul to Jakarta, our font-awesome icons have disappeared from our IT System Status page. I am attaching a screenshot, below. The box is still being drawn by CSS where the icon should be, but no icon is visible.

Strangely enough, if you navigate to the widget on the Page Designer, it displays just fine.

Can someone please help point in a direction where the problem may be?

Thank you!

Ashley · ‎03-13-2019

Good Afternoon,

Did you ever figure this one out as I have a couple of icons that have started disappearing as well?

Ashley

Janel · ‎07-23-2019

Edit: This is the worst WYSIWYG ever! When editing it is formatted nicely, but when I save, well, you're looking at it.

Same thing happened to us for the when we went from Istanbul to Madrid. It looks like the dependencies moved.

On the plus side, it sounds like you just need to add the stylesheet back to it (/styles/retina_icons/retina_icons.css or /scripts/icon-fonts/font-awesome/css/font-awesome.cssx).

Be aware there are two sets of icon fonts. Retina Icons and Font Awesome. These are different style sheets, but are still called the same way. Here I'll be using Retina Icons because of the nice preview list that is available. If you rather use Font Awesome, just replace everything below with Font Awesome stuff instead.

I make no promises any of this will be available in your instance or will continue to work going forward!

Adding to a Portal Widget or Portal Theme

On a portal widget, open the widget in the platform. In the Dependencies related list, add whatever version of "Retina Icons" you may have.
- If you have more than one it could be from different application scopes or different sets with other dependencies attached. You'd have to go open them and take a look.
- If you don't have any showing up, you'll need to create the dependency (I don't think there is an OOB one?), see below.

On a portal page, I'm not certain.

Or you can just add the stylesheet to the theme of an entire portal and not worry about adding it here or there. Open the Theme your portal is using in the platform (Service Portal > Themes). In the CSS Includes related list, add your retina icons stylesheet.
- This time I had four options for these and they all pointed to the same place. One even appeared as a file path. If you don't have any options here I'm not sure what to do next. Try looking in one of these places or you'll have to do the full load of the styles. Which you'll have to Google for:
- - https://YOURINSTANCE.service-now.com/styles/retina_icons/retina_icons.css
  - https://YOURINSTANCE.service-now.com/scripts/icon-fonts/font-awesome/css/font-awesome.cssx

EDIT (2020/01/03): After checking in a PDI the OOB ones are RetinaIcons and RetinaIconsCSS under the application Service Portal Surveys and HeisenbergRetinaIcons (/styles/retina_icons/retina_icons.css) under Global.

After adding HeisenbergRetinaIcons as a CSS Includes to my Theme, I was able to to use *most* retina icons in Service Portal using . Also note that the icons do not always show up in a widget preview, but will when viewing a page. I'm guessing the preview ones will only show if loaded into portal via another method.

Adding to a UI Page or Macro

If you're not using a widget and you're using a UI Page or Macro, just add a link to the stylesheet before your body in your HTML.

or

Using the Icons

A nice list of the Retina icons can be found here: https://YOURINSTANCE.service-now.com/styles/retina_icons/retina_icons.html

Now you can call the icons on your page or whatever using one of three options:

I like the last option since it sets the fa class and may be useful later if you want to like, stylize it or modify the class or something.

Widget Dependencies

Service Portal > Dependencies

If you have a scoped version already, just do an Insert & Stay in your scope and you're done. Go back and add it.

Click New
Give your dependency a name (like retina_icons)
Save.
In the CSS Includes related list, add the style sheet "/styles/retina_icons/retina_icons.css" from the collection.
Done. Go back and add it to the widget.

Font Awesome

So you don't have Retina Icons or you cannot get it to work. There is also font awesome, which can be found here:

https://YOURINSTANCE.service-now.com/scripts/icon-fonts/font-awesome/css/font-awesome.cssx

Like Retina, you have to call the stylesheet.

The icons are called the same way. There isn't a pretty list of them like Retina that I am aware of. Picking them could be a bit of a pain without seeing them.

Waldemar1 · ‎09-03-2020

I had the problem with font_awesome, added a dependency to the theme and my problems were solved. THANKS SO MUCH!!!

ogMGOPW · ‎03-18-2021

I couldn't figure out why my fontawesome icons weren't working, until I realized this is the formatting for them:

<i class="fa fa-twitter"></i>

Make sure you add the fa as well as the actual fontawesome class for it in the class spot.