Sass / Compass Font Awesome issues (displaying odd glyphs instead of icons?)

5
votes

Sass 3.4.9
Compass 1.0.1
Font Awesome 4.2

I'm compiling Font Awesome 4.2 (as Sass) with Compass. Instead of intended icons, I get random glpyhs. I'm new to Sass/Compass. This is also my first post ever on StackOverflow (so cool, but I hope I'm asking my question right and what not!). I've googled and searched here until my stack overflowed to no avail. Cannot seem to find anyone else with this same problem.

Directory structure:

[public_html]
../config.rb
..[assets]
....[fonts]
....../FontAwesome.otf
....../fontawesome-webfont.eot
....../fontawesome-webfont.svg
....../fontawesome-webfont.ttf
....../fontawesome-webfont.wo
....[stylesheets]
......[css]
........screen.css
......[sass]
......../screen.scss
........[font-awesome]
........../_bordered-pulled.scss
........../_core.scss
........../_fixed-width.scss
........../_icons.scss
........../_larger.scss
........../_list.scss
........../_mixins.scss
........../_path.scss
........../_rotated-flipped.scss
........../_spinning.scss
........../_stacked.scss
........../_variables.scss
........../font-awesome.scss

File "config.rb":

require 'compass/import-once/activate'
http_path = "/"
css_dir = "/assets/stylesheets/css"
sass_dir = "/assets/stylesheets/sass"
images_dir = "/assets/images"
javascripts_dir = "/assets/scripts/js"
output_style = :compact
relative_assets = true
line_comments = false

File "public_html/assets/stylesheets/sass/screen.scss":

@import "font-awesome/font-awesome";

File "public_html/assets/stylesheets/sass/font-awesome/font-awesome.scss":

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

File "public_html/assets/stylesheets/sass/font-awesome/_variables.scss":

$fa-var-building: "\f1ad";
$fa-var-car: "\f1b9";
$fa-var-envelope-o: "\f003";

HTML:

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/css/screen.css">
...
<li><a href="javascript:void(0)"><i class="fa fa-fw fa-building"></i> Company</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-fw fa-car"></i> Services</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-fw fa-envelope-o"></i> Contact</a></li>

Output:

ï† Company  Services  Contact

Chrome Dev tools Network tab data:

Request URL: /assets/fonts/fontawesome-webfont.woff?v=4.2.0
Request Method: GET
Status Code: 304 Not Modified
Connection:Keep-Alive
Date:Mon, 12 Jan 2015 10:49:56 GMT
ETag:"246ded-ffac-5018b0cc6f280"
Keep-Alive:timeout=5, max=98
Server:Apache/2.2.29 (Unix) mod_ssl/2.2.29 OpenSSL/1.0.1e-fips mod_bwlimited/1.4

* EDIT *

Playing with Chrom Dev tools, if I inspect icon element, it shows:

.fa-building:before { content: ""; } // resulting data in compass compiled screen.css

if I change that to:

.fa-building:before { content: "\f1ad"; } // source data in original FA _variables.scss

it works correctly. How do I prevent Compass/Sass from converting my escape strings to unicode characters?

6
csssasscompass-sassfont-awesomecompass

6 Answers

6
votes

Solution:

Add to top of font-awesome.scss:

@charset "UTF-8";

Compass now compiles with escape codes intact versus BOM. Icons now display correctly.

2
votes

A combination of the above answers did the trick for me:

Correct meta tag in <head>:

<meta charset="utf-8" />

UTF-8 encoded CSS:

@charset "UTF-8";

And additionally, ensure the @charset declaration is the very first line in your CSS file. This tripped me up as I was performing Gulp processing, including copyright stamping processed source and did so at such a point that the @charset rule was not the first line - replicable bug.

Also, for people who have this issue but cannot replicate it reliably (as I couldn't) - use the Audit feature in Chrome devtools. For me, an Audit was performed (did not display the bug) and finished it's job, the resulting page that displayed always showed this encoding bug.

0
votes

It is clear that you are using wrong path, so font file is not found. You are using relative path in File "public_html/assets/stylesheets/sass/screen.scss":

@import "font-awesome/font-awesome";

May be this is a reason

0
votes

I solved a very similar issue by removing charset from my scss and removing quote characters from the utf codes

.fa-building:before { content: \f1ad; }
0
votes

I was experiencing the same problem as this recently.

It turns out it was because I had omitted the following tag in my HTML head:

<meta charset="utf-8" />

(face palm)

Once I had added that in, my compiled CSS displayed the correct icons.

0
votes

I found solution here: https://github.com/sass/sass/issues/659#issuecomment-71759457

Remove first slash in your variable, eg:

$fa-var-building: "\f1ad";
// Should be:
$fa-var-building: "f1ad";

Then use this syntax in content code:

.icon:before {
  { content: #{"\"\\"}#{$icon-code + "\""}; }
}

Example: https://www.sassmeister.com/gist/d484e00fe9243d4ba0c8