Sass / Compass字体令人敬畏的问题（显示奇怪的字形而不是图标？） [英] Sass / Compass Font Awesome issues (displaying odd glyphs instead of icons?)

问题描述

Sass 3.4.9

Compass 1.0.1

Font Awesome 4.2

Sass 3.4.9
Compass 1.0.1
Font Awesome 4.2

我正在编译Font Awesome 4.2 （如Sass）和Compass。我得到的不是随机的图标，而是随机的glpyhs。我是Sass / Compass的新手。这也是我在StackOverflow上的第一篇文章（太酷了，但我希望我问的问题是对的，什么不对！）。我一直在这里搜索和搜索，直到我的筹码池无济于事。似乎找不到其他人遇到同样的问题。

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.

目录结构：

[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：

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

文件 public_html / assets / stylesheets / sass / screen.scss：

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

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

文件 public_html / assets / stylesheets / sass / font-awesome / font-awesome.scss：

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：

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>

输出：

ï† Company  Services  Contact

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

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

*编辑*

使用Chrom Dev工具，如果我检查图标元素，它会显示：

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

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

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

推荐答案

解决方案：

添加到font-awesome.scss顶部：

Add to top of font-awesome.scss:

@charset "UTF-8";

指南针现在可以使用转义码和BOM完整地进行编译。图标现在可以正确显示。

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

这篇关于Sass / Compass字体令人敬畏的问题（显示奇怪的字形而不是图标？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！