Sass/Compass字体很棒的问题(显示奇怪的字形而不是图标？)

Sass 3.4.9
Compass 1.0.1
Font Awesome 4.2

我正在用Compass编译Font Awesome 4.2(作为Sass).而不是预期的图标,我得到随机的glpyhs.我是Sass/Compass的新手.这也是我在StackOverflow上的第一篇文章(太酷了,但我希望我的问题是正确的,什么不是!).我在谷歌上搜索并搜索,直到我的筹码溢出无济于事.似乎无法找到有同样问题的其他人.

目录结构:

[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

文件"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

文件"public_html/assets/stylesheets/sass/screen.scss":

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

文件"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:

...
 Company
 Services
 Contact

输出:

ï† Company  Services  Contact

Chrome开发工具网络标签数据:

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字符？

解:

添加到font-awesome.scss的顶部:

@charset "UTF-8";

Compass现在编译完整的转义码与BOM.图标现在可以正确显示