fontawesome icons not loading in ui if the operator local is arabic
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
***Edited by Moderator Marije to add correct spelling of fontawosome to fontawesome in Title for easier search ***
***Edited by Moderator Marije to add correct new case INC-C2569 ***
Accepted Solution
Updated: 4 Feb 2025 4:34 EST
Adeo
AE
@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 <link rel="stylesheet" type="text/css" href="webwb/fontawesome.css"> in UserWorkForm html fragment rule this way it will be called in arabic local and icons will load normally 😎 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 ! 🎉
Updated: 31 Jan 2025 5:18 EST
Pegasystems Inc.
GB
@Mazen what version of Pega are you using?
can you confirm you are talking about the 'Font Awesome' library ?
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:
@Mazen what version of Pega are you using?
can you confirm you are talking about the 'Font Awesome' library ?
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.
Pegasystems Inc.
GB
@AnilReddyG16888514 please log a support issue via the MSP if the details I provided above did not help you.
Adeo
AE
Updated: 31 Jan 2025 5:56 EST
Pegasystems Inc.
GB
@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:
https://github.com/FortAwesome/Font-Awesome/issues
https://fisharebest.github.io/font-awesome-rtl/
https://fontawesome.com/v5/icons/paragraph-rtl?s=solid
https://gist.github.com/MohammadYounes/3d8af806cd80ad6bbe94
https://css-tricks.com/forums/topic/font-awesome-with-rtl-language/
⚠ 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:
@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:
https://github.com/FortAwesome/Font-Awesome/issues
https://fisharebest.github.io/font-awesome-rtl/
https://fontawesome.com/v5/icons/paragraph-rtl?s=solid
https://gist.github.com/MohammadYounes/3d8af806cd80ad6bbe94
https://css-tricks.com/forums/topic/font-awesome-with-rtl-language/
⚠ 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:
- Add RTL Support to Your CSS
[dir="rtl"] .fa::before,[dir="rtl"] .fas::before,[dir="rtl"] .far::before,[dir="rtl"] .fab::before {direction: ltr;display: inline-block;}- Ensure Proper HTML Structure Make sure your HTML element has the correct direction attribute:
<html dir="rtl" lang="ar">- FontAwesome CSS Loading Order
- Ensure the FontAwesome CSS is loaded before any custom CSS
- Add your RTL-specific CSS after the main FontAwesome CSS
- 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:
- If you're using a custom font loading method, make sure it's compatible with RTL layouts
- Consider using the newer FontAwesome 6.x version which has improved RTL support
- 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:
- Check the computed styles in your browser's developer tools
- Verify if any custom CSS is overriding the FontAwesome styles
- Test in different browsers to isolate if it's browser-specific
Adeo
AE
@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.
Accepted Solution
Updated: 4 Feb 2025 4:34 EST
Adeo
AE
@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 <link rel="stylesheet" type="text/css" href="webwb/fontawesome.css"> in UserWorkForm html fragment rule this way it will be called in arabic local and icons will load normally 😎 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 ! 🎉
Adeo
AE
@MarijeSchillern yes it is loading perfectly in the HTML without any interfere from my side