Weird characters (5.4.1, Edge, Windows)

[jarahn]

Describe the bug
Icons are rendering as strange characters. Related issues: #14660 #10842
Examining previous bug reports, it does not appear that there is an official workaround from Font Awesome.

To Reproduce
Seems to happen randomly across all of our sites. Occurs locally, in our beta build, and in production.
Unable to offer a reproducible scenario. No console errors on the browser.

Expected behavior
The icons to render appropriately.

Screenshots
Attached a screen shot. Also attached .txt file with relevant compiled css. Unsure of how to upload the compiled css file.
FA-compiled-css-hieroglyphics.txt

Version and implementation
Version: Font Awesome 5 Pro 5.4.1
Browser and version: Edge 88, Windows 10 OS

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Bug report checklist

• I have filled out as much of the above information as I can
• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I think that this issue is generated by the preprocessor or uglifier that your application is using. Maybe an old version of Sass?

This has been fixed on our side:

The following content taken from your attachment is not correct:

.fa-home:before{content:""}

You should see this:

.fa-home:before {content:"\f015";}

Ref: https://github.com/FortAwesome/Font-Awesome/blob/5.15.2/css/fontawesome.css#L2190-L2191

Please make sure that your front-end module bundler produces a correct CSS

Closing here, but feel free to comment

Ref:

• Loading font-awesome with webpack, wrong content attribute #6552
• fixes issue #6552 #6728
• Weird characters on random refreshes (Ubuntu 14.04, Archlinux, Chrome) #10842
• Weird characters on random refreshes (Ubuntu 14.04, Archlinux, Chrome) #10842 (comment)

[ADNewsom09]

Considering it doesn't get recompiled or redeployed between working/not working what other options are there, bad network?

[tagliala]

Considering it doesn't get recompiled or redeployed between working/not working what other options are there, bad network?

Without a reproducible test case it is hard to debug or help

Please make sure that the stylesheet served by your web application contains properly escaped unicode points ("\f015")

[JiriZidek]

Just to confirm, that this happens on Chrome (versions within last half year) and Windows 10. I'm almost sure it is chromium problem. Unfortunately the occurence is random and we have no repro. From the occurences we can cocnlude, it is not prolem of minification (happens on non-minified CSS as well, it is not problem of web server. It looks like the css is cached in some preprocessed state, and after some time some "metadata" get lost so only F5 helps.

[casyalex]

Just to confirm, that this happens on Chrome (versions within last half year) and Windows 10. I'm almost sure it is chromium problem. Unfortunately the occurence is random and we have no repro. From the occurences we can cocnlude, it is not prolem of minification (happens on non-minified CSS as well, it is not problem of web server. It looks like the css is cached in some preprocessed state, and after some time some "metadata" get lost so only F5 helps.

It also happens on Mac, I am trying to fix it by upgrade Sass lib.

[tagliala]

It also happens on Mac, I am trying to fix it by upgrade Sass lib.

There are several reasons for this issue, so maybe the output is the same, but the reason is different

The problem is in the combination of FA + New Dart Sass / Ruby Sass libraries.

A breaking change introduced in Dart Sass 1.10.4->1.11.0 and Ruby Sass 3.6.0.>3.7.0, does not allow our escaping function to keep working anymore, anyway...

If your output css looks like .fa-home:before{content:""}, then there is definitely an issue. If it instead looks like .fa-home:before { content: ""; }, then it is ok but please make sure that:

1. The served CSS file starts with @charset "UTF-8";; OR
2. The HTML file referring the CSS has the <meta charset="utf-8"> meta tag

Ref: #17644 sass/dart-sass#427 sass/ruby-sass#90 #14660 (comment)

Since there are too many issues open about the same problem, let's lock here and use #17644