Strange/Weird characters on refresh (Self-hosted CSS compiled from SCSS)

[templeman15]

Describe the bug On random page loads or refreshing of page strange characters are displayed instead of the font awesome icons. Seems to very closely related to #15010 & #17611. However, it happens when using both fa classes and setting the content manually in css.

There is no trace of FA4 in the project.

To Reproduce

SCSS:

Expected:

Actual:

Expected behavior Expected behavior is that the font awesome icons would display correctly.

Version and implementation Version: Font Awesome Pro 5.14.0 Browser and version: Google Chrome 88.0.4324.150 OS: Mac OS 10.15.7

• [ ] SVG with JS
• [x] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

Bug report checklist

• [x] 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]

I did read the update, but with this "fix" does that mean the minified code results in the unicode string (ie. "\f26e")?

No, if you want a fix like that, it is a little bit more complicated at the moment and it will require a new fix after each update, please check the comments here: https://github.com/diowa/ruby3-rails6-bootstrap-heroku/pull/540

[lindalinya]

Hey guys, we don't use font-awesome but we came across your issue while trying to solve this problem with our own library so how you realized sass is decoding the Unicodes in build time and causing broken content to the classes

we work around this by importing the CSS icons files directly to js and skipping the sass-loader.

before: after:

Actually, this case is not from sass-loader but dart-sass. I have looked up many, many issues about this case, which are all over the major open-source warehouses such as sass, sass-loader, and so on.

The source of the problem is not the sass-loader, the sass-loader just calls the sass command, so the source of the problem is the default encoding of dart-sass (you can get this result just with sass-loader and file-loader), which stubbornly encodes characters that do not need to be encoded. So "\xxx" in our code is translated into a garbled character after dart-sass compilation.

Unfortunately, dart-sass could have had an elegant solution to this problem, however, their developers were so stubborn that they believed their default coding could not be changed. They think this effect is so great that they act like bandits and demand that person who asked the question provide stable replication steps for an occasional bug.

Guess the ultimate source of this problem can actually be attributed to the browser, the browser for the CSS encoding guess error, resulting in even if you have added html encoding and CSS charset, the font icon parsing still occurs problems.

The final solution, as this man says, is to Change your sass file to a CSS file. Extract all CSS styles that contain Unicode characters into a CSS file, not a Sass file. The CSS file does not need to go through the sass-loader, so the stubborn dart-sass cannot corrupt it

[nsunga]

Update on my end:

I ended up using a postcss plugin - https://github.com/lcoronelp/postcss-sass-unicode

I will say that its not great, though because this is what looks like is happening:

1. dart-sass is taking the unicode characters and encoding them to the square things []
2. then, the postcss plugin takes the square things and then decodes them back to the unicode characters in the final css

So now when the browser loads in the css, it doesnt have to do its decoding for whatever the square [] is - its just reading the value.

Until theres a popular solution, ive just been using the above plugin for now

[lindalinya]

Update on my end:

I ended up using a postcss plugin - https://github.com/lcoronelp/postcss-sass-unicode

I will say that its not great, though because this is what looks like is happening:

1. dart-sass is taking the unicode characters and encoding them to the square things []
2. then, the postcss plugin takes the square things and then decodes them back to the unicode characters in the final css

So now when the browser loads in the css, it doesnt have to do its decoding for whatever the square [] is - its just reading the value.

Until theres a popular solution, ive just been using the above plugin for now

Maybe you can try my idea if your font icon related styles are all in a sass file. Just change this sass file to a CSS file to make it escape dart-sass

[damirbogdanov]

Update on my end:

I ended up using a postcss plugin - https://github.com/lcoronelp/postcss-sass-unicode

I will say that its not great, though because this is what looks like is happening:

1. dart-sass is taking the unicode characters and encoding them to the square things []
2. then, the postcss plugin takes the square things and then decodes them back to the unicode characters in the final css

So now when the browser loads in the css, it doesnt have to do its decoding for whatever the square [] is - its just reading the value.

Until theres a popular solution, ive just been using the above plugin for now

thank you @nsunga, this approach seemed to help in our case and helped to resolve an issue

[vineeth-ktp]

Issue is often(50% of the time) occurring with Mac Chrome. I have tried adding charset, but it still fails. The icons gets added by CMS and we don't have a way to determine which of them to preload. We are using sass and not with dart as it is not supported by CMS. Is there any other solution suitable here?

[tagliala]

We are using sass and not with dart as it is not supported by CMS

This is supposed to happen with self-hosted css files compiled from Sass, so it should mean that user have the ability to make changes to the toolchain used to compile the css output.

You can:

• Downgrade to an older version of Sass not affected by the issue, ref: https://github.com/FortAwesome/Font-Awesome/issues/17644#issuecomment-796114103
• Fix the provided css by transforming some values. Steps at https://github.com/diowa/ruby3-rails6-bootstrap-heroku/pull/540

[viniciusdeliz]

For fellows using webpack and facing this issue, I've realized that while on localhost my stylesheet always had the icons in place. So I found that in the stylesheet of my built application I had the following output:

So testing a bit of options, I figured that the culprit of my setup was the sass-loader set for .scss files. So on my webpack.config.js for my /\.scss$/ rules, I included the following sassOptions entry in the options object for the sass-loader:

{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            outputStyle: 'expanded',
        },
    },
},

Now the stylesheet output for my build is the following:

Hopefully this can help someone!