fontawesome icons not loading in ui if the operator local is arabic

User Experience
,
1

hi everyone ,

i put fontawosome library in my application and working find if the operator local is english

If i use an operator with arabic local .. the icons in not loading

when i checked by f12 i found that files are loading but :: before is not loading this cause the icon to be blank

any help to show the ::before pseudo element

2

@Mazen what version of Pega are you using?

can you confirm you are talking about the ‘Font Awesome’ library ?

CSS Pseudo-elements

Implementing icon fonts

For Arabic or other right-to-left languages, Pega Platform uses tools built into Java and HTML to automatically handle right-to-left conversion based on the user’s locale.

Converting your UI for right-to-left languages

Converting the icon font for imported applications

There are known issues with displaying icons in right-to-left languages like Arabic in Pega applications, but these are not specifically related to the Font Awesome icon library. These issues are more about how Pega handles right-to-left languages and how icons are displayed in these languages.

cromium-based browsers have problem with RTL locale. Button is there, just displayed under the field, so you can’t see it.

Try applying following CSS to the harness:

html[dir=‘rtl’] .combo-box > button > .pi-caret-down {
position: relative;
}

Please log a support incident on the MSP if the product is not working as documented. Please provide the INC reference here so that we can help track the issue with you.

3

@Mazen I am also facing the same issue, Can you please help me if were able to find work around for this?

4

@AnilReddyG16888514 please log a support issue via the MSP if the details I provided above did not help you.

5

@AnilReddyG17370895

Actually i didn’t find any solution yet did u find a solution for this ?!

6

@sures do you know anything about the functionality of fontawesome in the product?

@Mazen please log a support issue via the MSP if the details I provided above did not help you.

Please check the fontawesome issues logged on external site:

GitHub · Where software is built

font-awesome-rtl

Paragraph Right-to-Left Solid Icon | Font Awesome

Adding RTL support to font-awesome · GitHub

Font awesome with RTL language - CSS-Tricks

:warning: This is a GenAI-powered tool. All generated answers require validation against the provided references.

The problem mabye occurs because 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. Here’s how to fix it:

  1. Add RTL Support to Your CSS
  2. [dir="rtl"] .fa::before,
  3. [dir="rtl"] .fas::before,
  4. [dir="rtl"] .far::before,
  5. [dir="rtl"] .fab::before {
  6. direction: ltr;
  7. display: inline-block;
  8. }
  9. Ensure Proper HTML Structure Make sure your HTML element has the correct direction attribute:
  10. <html dir="rtl" lang="ar">
  11. FontAwesome CSS Loading Order
    • Ensure the FontAwesome CSS is loaded before any custom CSS
    • Add your RTL-specific CSS after the main FontAwesome CSS
  12. Check Font Loading
    • Verify that the webfont files are properly loaded in the Network tab
    • Ensure there are no CORS (Cross-Origin Resource Sharing) issues
    • Check if the font-family is correctly specified in your CSS

Additional Recommendations:

  1. If you’re using a custom font loading method, make sure it’s compatible with RTL layouts
  2. Consider using the newer FontAwesome 6.x version which has improved RTL support
  3. Test the icons in both RTL and LTR contexts to ensure consistent rendering

For Pega-specific implementation:

  • Make sure your application’s skin includes the necessary RTL support
  • Verify that the operator’s locale settings are correctly configured
  • Consider using Pega’s built-in icon library as an alternative if needed

If you’re still experiencing issues after implementing these changes, please:

  1. Check the computed styles in your browser’s developer tools
  2. Verify if any custom CSS is overriding the FontAwesome styles
  3. Test in different browsers to isolate if it’s browser-specific
7

@Mazen Hello PEGA Community !

Actually after 5 hours of debugging it was very easy solution that made fontawesome library works on arabic local,

1/ put the fontawesome.css in the skin as last file in the included styles tab so it will not interfere with the custom css

2/ put in UserWorkForm html fragment rule this way it will be called in arabic local and icons will load normally :smiling_face_with_sunglasses: fontawesom.css == the name of the css file you uploaded into pega

Also it will work even without adding it to skin rule (we add it to skin rule so the icons will be avalibale when u choose icon class as source in the image control) if u didn’t put in skin u can get the icon class from fontawesome website and put it directly on the image control in your section and then it will also render on the UI

Summary : To make fontawesome work on your pega Arabic local call the library again in UserWorkForm ! :tada:

8

@MarijeSchillern yes it is loading perfectly in the HTML without any interfere from my side

9

@Mazen can you tell me if the CSS Pseudo-elements are still being used in the workaround you have provided?

10

@MarijeSchillernThanks for your response; I really appreciate it. I have logged a ticket on MSP but am still waiting for Pega’s reply. In the meantime, I will go through your suggestions, try them out, and share my findings with you and the community.