search

zurb / foundation-icons

427 stars 85 forks source link

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

Open simeoncode opened 9 years ago

simeoncode commented 9 years ago

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: https://github.com/FortAwesome/Font-Awesome/pull/6728