Weird characters on random refrehes (5.8.1, Chrome, macOS)

[rafecolton]

Describe the problem

This is the exact same issue as #14660 using FA version 5.8.1.

What did you expect?

Expected to see FA icons.

What version and implementation are you using?

Version: 5.8.1
Browser and version: Chrome, latest

SCSS is compiled into a single minified css file. Confirmed there are no more FA4 files, and all variables are unquoted.

Reproducible test case

This is not reliably reproduceable. It seems to happen randomly, even when the css has not been recompiled. Here is a screenshot:

Notice the heart that appears to be working. All of the other icons are using the fa-* classes, but that one has the font set manually and the icon code in the scss. In the scss, it is quoted.

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 (N/A)
• 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 and thanks for the detailed bug report.

Could you please provide:

• a link to your website (or, better, a reduced test case)
• chrome version
• os and version

Could you please also try:

• if the problem persists with the CDN
• if there are issues in the network panel or console panel of your browser's development tools
• webfont files (woff2 for chrome) have a correct sha1 hash
• webfont files and are downloaded properly from the server
• webfont files have the proper mime types

[rafecolton]

@tagliala website is https://yearlongmeditation.org

Chrome version is latest (Version 74.0.3729.169 (Official Build) (64-bit)), OS is macOS 10.14.3.

Regarding your other questions:

• When this occurs, there are no issues in the network panel or console
• The sha1 hash matches a fresh copy downloaded off your site (are they listed anywhere else?)
• Webfont files are downloaded properly from the server
• mime type for woff2 files is application/x-font-woff

[saimanoharnethi]

We are facing issue as well.

FontAwesome version: 4.7.0
Chrome : Version 74.0.3729.131 (Official Build) (32-bit)
Windows 10 Enterprise 1803

No issue in network panel
content: "" has a box when it works
and when it doesn't work it has some extra junk characters.

Note: I opened the CSS file up and the content: "" does have the weird characters in it, but when it works the browser magically knows to show just a box as content.

[tagliala]

@rafecolton sorry for the late reply

I cannot see the issue anymore, but the content is not escaped, please fix that

---

@saimanoharnethi

FontAwesome version: 4.7.0

Sorry, FA4 is in EOL

Note: I opened the CSS file up and the content: "" does have the weird characters in it, but when it works the browser magically knows to show just a box as content.

This has been fixed in FA 5.0.0. Please update or recompile Font Awesome 4.7.0 from scss, having care of implementing the content fix with an escaping function by yourself.

Ref: #6552

Hope it helps