node-sass: Fontawesome icon encoding issues

Question

I'm using node-sass and gulp-sass to compile my assets.

Now when I'm running gulp with sass outputStyle: 'nested' (default), the fontawesome characters are changed from:

$fa-var-home: "\f015";

to

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

Using this in the browser seems to be working fine.

When running sass with outputStyle: 'compressed', I'm getting different characters:

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

Now the strange part: sometimes, but I don't have any steps to reproduce this, the characters are also shown just like that, so  instead of a home icon.

I can't put my fingers on it and in 99.99% of the cases it is just fine. But in some situations it goes wrong and I don't understand why!

Answer 1

recently I had the same situation. whenever you compile compiling using compressed outputStyle it's also removing charset: utf-8. For that reason you are getting that different characters.

So I'm using postcss-normalize-charset which basically add necessary charset keeping outputStyle compressed