FontAwesome not loading
Question

Hi all,

Since we upgraded OutSystemsUI (and some other OS applications) every image from FontAwesome is not being shown anymore. Digging the code the font files seem to be called from OutSystemsReactWidget.css but are not loaded.

We still didn't deploy to production so behavior can be compared.


DEV (with OutsystemsUI upgraded):


PROD:


And looking at Chrome loaded sources in DEV:


And in PROD:


Anyone with this problem?

P.S.: OuSystemsUI version upgraded from 2.6.1 to 2.6.8..

Solution

As a quick fix the @font-face declaration can be added to the module/application/business theme.

mvp_badge
MVP

Thanks, I've marked this as solution, as long as we don't have an official one.

mvp_badge
MVP

Did you check the devtools console for any loading errors?

I did. No errors, all 200 OK.

Champion

Hello Joao

Can you please share the URL of dev environment with access to any screen having Font Awesome? So, we can inspect the issue and try to resolve it

Sorry Manish, it's a whitelisted corporate environment. Besides the business security issues I would have to ask to whitelist unauthorized IPs.

Champion

I understand. Then might be your environment is blocking and not allowing font awesome library to load. 


I am just sharing the general experience. Not in OutSystems but it happened with me in the dev environment with a PHP website because dev are on our premises server having lots of firewalls and security parameters.


I can't help further to this :)

Generated OutSystemsReactWidget.css file starts with something like:


//hubedition: ignore-unversioned-urls

@font-face{font-family:'FontAwesome';src: [...]

[data-button-group] > div { [...]


We all heard that commenting with // should be avoided. Now I know why: https://www.xanthir.com/b4U10

It comments not the line it's in, but comments the first following declaration. That is, comments 'hubedition' and '@font-face' lines.





Found out that this is not new, Matthias Preuter bumped into this a year ago.

mvp_badge
MVP

Fwiw, I've drawn the attention of OutSystems to this problem, and they're looking into it. I hope they can fix it soon.

Thanks Kilian!

Solution

As a quick fix the @font-face declaration can be added to the module/application/business theme.

mvp_badge
MVP

Thanks, I've marked this as solution, as long as we don't have an official one.

Hi @Joao Melo ,

What Platform Server version is this occurring on? I did a quick check on my personal with PS 11.12.0 and OSUI 2.6.8 and that comment does not appear on the OutSystemsReactWidget.css file.

Best regards,

Carlos Xavier

Hi Carlos,

We upgraded from 11.9.1 to 11.11.3 in Dev and Test environments. Still didn't in Prod.

And so I can compare the files and check the differences.

Hey there,

After a bit more digging, it looks like the compiler did not process the OutSystemsReactWidget.css file as it should, since that comment should be stripped out of the file. We are already fixing an issue that may cause that to happen. Additionally, we changed that comment to be a block comment so that, if the compiler fails to process that file once again, the comment doesn't cause any harm.

This should be fixed when version 11.13.0 comes out.

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