Search code examples
sassfont-awesome-5

Sass escaping quotation marks - Font Awesome 5

I'm trying to integrate font awesome 5 into my project, using Sass. The icons haven't been showing, but the files all load correctly, I eventually worked out that it's because it doesn't seem to escape the quotes correct.

This line

 @return unquote("\"#{ $fa-var }\"")

Should for example output

"\f00c"

But is instead outputting

\"\f00c\"

I've searched and this seems to be the correct way to escape quotes so I have no idea why it isn't working.

Solution

  • You need to update your sass compiler to the latest version, define your document encoding:

    @charset "utf-8";

    and then just return the plain FOnt Awesome variable:

    @return $fa-var;

    Sass now follows the CSS Syntax Level 3 specification for determining a stylesheet’s encoding. In addition, it now only emits UTF-8 CSS rather than trying to match the source encoding.