Sass / Compass Font Awesome 问题（显示奇怪的字形而不是图标？）答案

【问题标题】：Sass / Compass Font Awesome issues (displaying odd glyphs instead of icons?)Sass / Compass Font Awesome 问题（显示奇怪的字形而不是图标？）
【发布时间】：2018-06-01 09:53:19
【问题描述】：

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 开发工具，如果我检查图标元素，它会显示：

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

【问题讨论】：

标签： css sass compass-sass font-awesome compass

【解决方案1】：

解决方案：

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

@charset "UTF-8";

Compass 现在编译时使用完整的转义码而不是 BOM。图标现在可以正确显示了。

【讨论】：

您应该接受您的回答，因为它为您提供了解决方案

【解决方案2】：

以上答案的组合对我有用：

<head> 中的正确元标记：

<meta charset="utf-8" />

UTF-8 编码的 CSS：

@charset "UTF-8";

此外，确保 @charset 声明是 CSS 文件的第一行。这让我在执行 Gulp 处理（包括版权标记处理的源代码）时绊倒了我，并且这样做的时候@charset 规则不是第一行 - 可复制的错误。

另外，对于遇到此问题但无法可靠复制它的人（因为我不能） - 使用 Chrome 开发工具中的审核功能。对我来说，执行了审计（没有显示错误）并完成了它的工作，显示的结果页面总是显示这个编码错误。

【讨论】：

关于如何以可预测的方式重现问题的重要提示。谢谢，伙计！

【解决方案3】：

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

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

【讨论】：

对我来说，删除引号不起作用。编译后的 css 有规则：“content:\f1ad”，Chrome 将其视为无效而忽略。
是的，它缺少单/双引号。

【解决方案4】：

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

原来是因为我在 HTML 头部省略了以下标记：

<meta charset="utf-8" />

（掌心）

添加后，我编译的 CSS 会显示正确的图标。

【讨论】：

【解决方案5】：

我在这里找到了解决方案：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

【讨论】：

【解决方案6】：

很明显你使用了错误的路径，所以没有找到字体文件。您在文件“public_html/assets/stylesheets/sass/screen.scss”中使用相对路径：

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

可能是这个原因

【讨论】：

正确的字体路径“../../fonts”在文件“public_html/assets/stylesheets/sass/font-awesome/_variables.scss”中定义——另外，编译的“public_html/ assets/stylesheets/css/screen.css" 反映了所有导入文件的内容