[Icons For Everyone Core O11 Version] Font Awesome Library Conflicts with OutSystems Icon Library
Forge component by Pedro Coelho
Application Type
Traditional Web

I have added Icons for Everyone component in my environment, to use Font Awesome Icons that were not available within the built-in OutSystems icon library.

The icons render well but they have created a conflict with the OutSystems > Rich Widget > Icon WB.

If I have a Font Awesome icon from the component in my screen with other OutSystems icons, all outsystems icon will assume the library from the component. If the Outsystems icon content does not exist in the component library it won't render (e.g. the sign-out lcon).

Here are some examples:


Screen WITHOUT icon from the component

Screen WITH icon from the component:
 (plane and folder icon do not render and the remaining icons are updated with the component library)


How should I solve this conflict? If I really want more Icons I should only use the component icon WB throughout my app?

Thank you in advance for your help,

Clarisse

I have found that if I remove the following class from the Icons for Everyone > Font Awesome Theme CSS the conflict won't happen. But this may cause problems further ahead...


 

Here is a GIF

Can you provide an URL so i can test a few ideas? In some icons for the FAwesome library, when i add an -alt to the name class it work.


Hi Carlos,

here is an URL with icons for everyone and outsystems rich widgets icons. Test as you wish :)

https://clarisse-carneiro.outsystemscloud.com/SandBox_CTC/Test_IconsForEveryone.aspx?_ts=637632372050489672

Regarding the alt, I have tried that and it also works. Maybe because the '.fa, .fas' will become '.fa-alt, .fas' like removing the '/* .fa */, .fas' from the Theme (previous shared gif)?


My only concern is I don't know if there will be impacts with this change. At the moment both icons seem to be working...

You are right Clarisse, your idea is more robust than mine. This plugin should be upgraded to use only fas as default class, since the fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. The class far fal fad it's only for FAwesome5 Premium Users

mvp_badge
MVP

Hello Clarisse

You shouldn't be using both widgets on the same screen, there is no need for it unless you specifically want an icon that doesn't exist anymore in v5. Is this the case?

FA changed the way they named the classes from v4 to v5 and causes this

Hello Pedro!

Well, I was using OutSystems icons as my main source and then the component when I wanted an extra. Not the other way around.

Could Carlos input (previous comment) be a solution for this case, allowing both widgets to co-exist?

"This plugin should be upgraded to use only fas as default class, since the fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. (...)"

Otherwise I would have to replace all my OutSystems Icons with the component... and in service studio the component does not have a preview of the icon, which outsystems has and it's nice to have (example in the image below).

I think this is what Carlos was saying:

https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/upgrading-from-version-4

So, maybe removing the fa will solve the conflict and the version 5 icons should be working properly?

mvp_badge
MVP

I was chatting with Carlos, I was already thinking of upgrading for the latest version this could be one of the changes to go with it also

Thank you for the feedback

ok. Thank you!

In the meantime I will change the component to hide that class (since we saw that it won't impact the icons from the component). When you release a new version I will update the component in the environment :)

When you update the component just leave here a comment and I will mark it as the solution :)

Once again, thank you for the help. Have a nice day!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.