Fontawesome icons not loading in UI if operator locale is Arabic

Known Issue

MarijeSchillern

Member since 2012

49 posts

MOD

Posted: 1 day 4 hours ago

Last activity: 1 day 4 hours ago

Posted: 10 Mar 2025 8:57 EDT
Last activity: 10 Mar 2025 8:57 EDT

Fontawesome icons not loading in UI if operator locale is Arabic

Issue

The application does not display fontawesome icons. This can occur when the application is using a RTL locale.

Symptoms and Impact

The Font Awesome library is not loaded when accessing Font Awesome icons in a session running with the Arabic locale.

Icons from the library are not rendering and show broken image links.

Steps to reproduce

Download the Font Awesome library from the vendor: https://fontawesome.com/start
Upload font files (.ttf, .woff etc) into Rule-File-Binary which will store these files in /webwb directory on server.
Create a Font Awesome Cascading Style Sheets (CSS) text file and refer to the binary file path.
Include Font Awesome CSS in Skin rule.
Change Locale to Arabic
View the Image property. Icons are not loading.
Verify if the webfont files are properly loaded in the Network tab.

ICON

Root Cause

CSS has a powerful feature known as pseudo-elements that lets you visually add content to the page with just CSS. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property.

Font Awesome uses the ::before pseudo-element to add icons to a page . Font Awesome uses classes like fa and fa-user to show icons in the application page.

FontAwesome icons rely heavily on CSS ::before pseudo-elements, and when working with RTL (Right-to-Left) languages like Arabic, additional CSS configuration is needed to ensure proper rendering.

The :: before element needs to be loaded first as it relates to the content value of the icon itself.

The browser DevTools element inspector shows that the font files are loading but the :: before pseudo element is not loading, causing the icons to be blank.

Content style element missing in Arabic locale

Browser Dev Tools Element panel showing loaded CSS ::before elements on English local

Solution

To make Font Awesome toolkit work on an Arabic locale, call the library directly in the UserWorkForm.

1. Add CSS file to the application skin rule

Place the font-awesome.css in the skin as the last file in the Included Styles tab so it will not interfere with the custom CSS.

Open the skin that you want to edit.
On the Included styles tab, expand the Additional style sheets section.
Click Add style sheet, and then click the Open icon.
On the new tab, provide the label for the CSS sheet, and then click Create and open.
On the newly created tab, provide the CSS for the skin. To upload an existing sheet, click Upload file, and then navigate to the target file.

2. Update the UserWorkForm

Add the following code in the UserWorkForm html fragment rule:

<link rel="stylesheet" type="text/css" href="webwb/font-awesome.css">

Using the UserWorkForm method means that the library will load even without adding it to the Skin rule.

This method will work even without adding it to skin rule as you can get the icon class directly from the fontawesome website and you can put it directly on the image control in your section.