sass - 在 Sass 中使用 FontAwesome

Question

我正在尝试在网络 compass 项目中使用 FontAwesome。由于 FontAwesome page 中没有特定的文档，而且我没有使用 Bootstrap，我遵循了“不使用 Bootstrap？”方向，但无法使其工作。

输出

我没有收到任何特定错误，无论是未找到还是编译错误。它只是没有显示任何内容，没有图标或文本。 FontAwesome 字体文件似乎没有加载。

我做过的步骤

下载 font-awesome目录

将它复制到我的项目 css 文件夹中，这里有我所有编译的 css:project/css/font-awesome

导入 font-awesome.scss像这样在我的主要 sass 样式表中添加文件 @import url("font-awesome/scss/font-awesome.scss");

打开 font-awesome.scss文件并更改导入路径，因此现在相对于我的 css 编译文件，看起来像这样 @import url("font-awesome/scss/_variables.scss");

打开 _variables.scss部分在 font-awesome/scss 目录中并更改 @FontAwesomePath从默认设置为 "font-awesome/font/" , 匹配 webfonts 所在的位置

在我的 html 文件中，在 FontAwesome examples page 中添加了一个示例，所以我添加了一个 <i class="icon-camera-retro"></i> Some text

在我的主要 sass 文件中，添加了 @font-face宣言

@include font-face('FontAwesome',
font-files(
'font-awesome/font/fontawesome-webfont.woff', woff,
'font-awesome/font/fontawesome-webfont.ttf', ttf,
'font-awesome/font/fontawesome-webfont.svg', svg),
'font-awesome/font/fontawesome-webfont.eot');

 %icon-font {
     font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
  }

扩展选择器中的字体

.icon-camera-retro {
    @extend %icon-font;
 }

使用 compass --watch 编译我的主要 sass 样式表没有错误

上传所有内容

为了帮助澄清，这是我的项目的结构:

root
    sass
        mainsass.scss
    css
        font-awesome
            css
                font-awesome.css
            font
                font-archives.ttf/.woff/etc
            scss
                _partials (_variables.scss, _path.scss, _core.scss, etc)
                font-awesome.scss
        fonts
            some-custom-font.ttf
        mainsass.css

所以如果有人读到这里，我已经很感激了，请问有什么想法吗？

Answer 1

好的，我得到了帮助，路径有几个问题是主要问题。我会在这里解释它们，以防它对我的职位有所帮助。

问题是:事实上，字体文件没有加载

错误:主要与路径以及 compass 和 sass 与 @import 的行为有关

对我上述步骤的更正:

1)你不能在那个上做错......
2)首先，不要把整个文件夹放在css目录下。每种类型的文件都应该放在它的目录中，所以 sass 目录下的 .scss 文件，css/fonts 目录下的字体文件(.ttf、.woff 等)。

这在 Sass 中很重要，因为方式 @import作品。在 Sass Reference说

Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command line.

我忽略了这一点并将我的 .scss 文件放在其他目录中，这就是使用普通 @import 的原因。他们找不到。这将我们引向下一点。

3) 尝试将 .scss 文件作为 url() 导入是愚蠢的，我尝试这样做是因为常规 @import没有工作。一旦 font-awesome.scss 文件在我的 sass 目录中，我现在可以 @import "font-awesome/font-awesome.scss"
4) 相同，@import路径是相对于 .scss 文件的，只要 font-awesome.scss 和它的部分文件在同一个文件夹中，就不需要碰这些。

5) 没错，您需要更改@FontAwesomePath匹配您的字体目录

6) 当然你需要一个 HTML 示例进行测试，所以在这里可以

7) 那是不必要的，它已经在我导入的 font-awesome.scss 中了。干燥。

8) 同上，也不需要。

9 & 10) 是的，女孩，干得好

那么，从这里学到什么 :考虑到 Sass 中的 @import 仅在当前 sass 目录中的外观(默认情况下)，请检查您的路径两次。