Question

Sass 3.4.9
指南针1.0.1
字体真棒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：

<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开发工具网络标签数据：

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

Answer 1

解决方案：

添加到font-awesome.scss：

的顶部

@charset "UTF-8";

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

Answer 2

上述答案的组合为我提供了诀窍：

更正<head>中的元标记：

<meta charset="utf-8" />

UTF-8编码的CSS：

@charset "UTF-8";

此外，确保@charset声明是CSS文件中的第一行。当我执行Gulp处理时，这使我感到沮丧，包括版权标记已处理的源代码，并且在@charset规则不是第一行 - 可复制错误的情况下这样做了。

此外，对于遇到此问题但无法可靠地复制它的人（我不能） - 使用Chrome devtools中的审核功能。对我来说，审计已执行（未显示错误）并完成了它的工作，显示的结果页面始终显示此编码错误。

Answer 3

很明显，您使用了错误的路径，因此找不到字体文件。您正在File＆＃34; public_html / assets / stylesheets / sass / screen.scss＆＃34;中使用相对路径：

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

可能这是一个原因

Answer 4

我通过从我的scss中移除charset并从utf代码中删除引号字符来解决了一个非常类似的问题

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

Answer 5

我最近遇到了同样的问题。

事实证明这是因为我在HTML头中省略了以下标记：

<meta charset="utf-8" />

（面掌）

一旦我添加了它，我编译的CSS就会显示正确的图标。

Answer 6

我在这里找到了解决方案：https://github.com/sass/sass/issues/659#issuecomment-71759457

删除变量中的第一个斜杠，例如：

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

然后在内容代码中使用此语法：

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

示例：https://www.sassmeister.com/gist/d484e00fe9243d4ba0c8

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

6 个答案: