Sass 3.4.9
Compass 1.0.1
Font Awesome 4.2
I am compiling Font Awesome 4.2 (like Sass) using Compass. Instead of the outlined icons, I get random glpyhs. I am new to Sass / Compass. This is also my first StackOverflow post (so cool, but I hope I ask my question correctly and what not!). I searched Google and searched here until my stack overflowed to no avail. Seems unable to find anyone else with the 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";
"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>
:
ï† Company  Services  Contact
Chrome Dev. :
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
* *
Chrom Dev, , :
.fa-building:before { content: "ï†"; } // resulting data in compass compiled screen.css
:
.fa-building:before { content: "\f1ad"; } // source data in original FA _variables.scss
. Compass/Sass Unicode?