SCSS Processor Unicode Output Incorrect

Question

I have tested this issue using Scout-App and Visual Studio Code on Windows 10.

Having just downloaded Font-Awesome 4.7.0 SCSS files and set up a project/workspace, I have noticed a problem with unicode output. As an example:

in the '_variables.scss' partial, we have:

$fa-css-prefix: fa;
$fa-var-music: "\f001";

and in '_icons.scss' partial, we have:

.#{$fa-css-prefix}-music:before { content: $fa-var-music; }

with an expected result of:

.fa-music:before { content: "\f001"; }

but the output is:

.fa-music:before { content: ""; }

So all the unicode values stored in variables are processed to 

Thus I am unable to correctly compile the correct output for a modified font-awesome CSS file.

I have tried placing UTF8 encoding at the top of each SCSS file but the issue is still unresolved.

For a quick test, this will produce the result described:

test.scss

@charset "UTF-8"; 
$fa-css-prefix: fa;
$fa-var-music: "\f001";
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }

Welcome to stack overflow user2631949 is \f001 a valid unicode? do you have a font thats supports this code? Your output looks valid Ref https://www.fileformat.info/info/unicode/char/f001/browsertest.htm — , Dec 26 '19 at 13:44
https://www.fileformat.info/info/unicode/char/f001/index.htm — , Dec 26 '19 at 13:47
Yes, it is the unicode value that Font-Awesome uses to map to a specific icon in their font files. Another example, which also fails to output the the unicode value stored in the variable and instead, produces: $fa-css-prefix: fa; $fa-var-home: "\f015"; .#{$fa-css-prefix}-home:before { content: $fa-var-home; } and the output is: .fa-home:before { content: ""; } Which is no longer going to point to the correct icon. You can see all the unicode mappings on the [Font_Awesome Cheatsheet](https://fontawesome.com/cheatsheet) — user2631949, Dec 27 '19 at 14:58
Hi user2631949 Which method di you use to install the fonts for Font-Awesome? did you install them locally or on a server? Desktop / local https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started Serve https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself I ask because you're report seems to indicate the Font-Awesome fonts are not installed / accessible — , Dec 27 '19 at 16:10
No problems installing downloaded CSS Font-awesome and using on my website. Trying to use their SCSS file to process a cut down version of just the fonts I need. I could do it by hand but I'm trying to automate the process as intended by SCSS technology but latest version fails to process the unicode values. — user2631949, Dec 28 '19 at 20:46

score 0 · Answer 1 · edited Jan 19 '23 at 09:44

It seems by writing:

"\f0a9" ,

Scout will compile the unicode character.

But, if you use interpolation:

#{'"' + \f0a9 + '"'}

then Scout will compile to "\f0a9".

You can also use variables like

$escaped: \f0aa;
...
#{'"' + $escaped + '"'}

or:

$escaped: f0aa;
...
#{'"\\' + $escaped + '"'}

Remarks:

The compiled unicode character may become a problem to the browser in the content attribute. Therefore you want to give him the written hex code.
If you mess around with the backslash and the interpolation, see also here: Sass variable interpolation with backslash in output

SCSS Processor Unicode Output Incorrect

1 Answers1