Menu
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?
337
Solution:
Add to top of font-awesome.scss:
@charset "UTF-8";
Compass now compiles with escape codes intact versus BOM. Icons now display correctly.
182
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
