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..
As a quick fix the @font-face declaration can be added to the module/application/business theme.
Thanks, I've marked this as solution, as long as we don't have an official one.
Did you check the devtools console for any loading errors?
I did. No errors, all 200 OK.
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.
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.
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!
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.
I use 11.54.34 version and the problem is still there. But I figure out that if you use the icon component in any of your screens or blocks it will download the FontAwesome correctly.
So the problem is here in the src in OutSystemsReactWidget.css :
wrong (without the icon component):
@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.woff2')
correct (with the icon component):
font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.woff2?5s98bsfC1vZwrp12JgTLCw')
So for dummy solution just add the icon component to any of your UI