Icons showing as e.g. \f003 due to SASS handling of backspace

[simeoncode]

Hi, I couldn't get the SASS version of the icons working, but when including your pre-generated CSS file it worked fine. So I started digging around, and found that when generating CSS from the SASS version of foundation-icons, the output is as follows:

.foundicon-plus:before {
    content: "\\f003";
}

This breaks the icons since it should be content: "\f003" in order to display correctly.

Maybe the issue arises due to changes in how the sass library is parsing stuff? I'm using gulp-sass to compile.

I've created a workaround locally by doing this on lines 5-9 in _settings.scss:

@mixin i-class($name,$pua) {
  .#{$classPrefix}#{$name}:before {
    content: unquote('"\f#{$pua}"');
  }
}

This fixes the error for me, outputting e.g. .foundicon-plus:before { content: "\f003"; }

I got the solution from the FontAwesome project: FortAwesome/Font-Awesome#6728