在Sass中使用FontAwesome [英] Using FontAwesome with Sass

问题描述

我正在尝试在网络指南针项目中使用FontAwesome。由于 FontAwesome页面中没有特定的文档，因此我没有使用引导程序，我遵循了不使用引导程序？

I'm trying to use FontAwesome in a web Compass project. As there's no specific documentation in the FontAwesome page, and I'm not using Bootstrap, I've followed the "Not using Bootstrap?" directions but can't make it work.

我没有得到具体的错误，或者没有找到或编译错误。它只是不显示任何内容，没有图标或文字。 FontAwesome字体文件似乎没有加载。

I get no specific errors, either not found or compiling errors. It's just not showing anything, no icon or text. The FontAwesome font files doesn't seem to be loading.

1. 下载 font-awesome 目录


2. 将其复制到我的项目css文件夹中，其中存放了所有已编译的css ： project / css / font-awesome


3. 导入 font-awesome.scss 文件在我的主要sass样式表中，例如 @import url（ font-awesome / scss / font-awesome.scss）;


4. 打开 font-awesome.scss 文件并更改导入路径，因此现在相对于我的css编译文件，如下所示： @import url（ font-awesome / scss / _variables.scss）;


5. 打开 _variables.scss 在font-awesome / scss目录中部分放置，并将 @FontAwesomePath 从默认的更改为 font-awesome / font / ，以匹配网络字体的位置


6. 在我的html文件中，在 FontAwesome示例页面，所以我添加了< i class = icon-camera -retro< / i>一些文本



7. 在我的主要sass文件中，添加了 @ font-face 声明

1. Download the font-awesome directory
2. Copy it to my projects css folder, where I have all my compiled css: project/css/font-awesome
3. Import the font-awesome.scss file in my main sass stylesheet like this @import url("font-awesome/scss/font-awesome.scss");
4. Open the font-awesome.scss file and change the import paths so are now relative to my css compiled file and look like this @import url("font-awesome/scss/_variables.scss");
5. Open the _variables.scss partial inside the font-awesome/scss directory and change the @FontAwesomePath from the one by default to "font-awesome/font/", to match where the webfonts are
6. In my html file, added an example following one in the FontAwesome examples page, so I added a <i class="icon-camera-retro"></i> Some text

7. In my main sass file, added the @font-face declaration

@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;
  }

在选择器中扩展字体

Extend the font in the selector

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

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

为了说明清楚，这是我的项目结构：

To help clarify, this is the structure of my project:

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

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

So if anyone has read up to here, which I already appreciate, any ideas please?

推荐答案

好的，我对此有所帮助，主要问题是路径问题。我会在这里解释它们，以防它帮助处于我位置的人。

Ok, I got help with that and there were several issues with the paths that were the main problem. I'll explain them here in case it helps someone in my position.

问题是：实际上，字体文件没有加载

The problem was: indeed, the font files were not loading

错误：主要与路径以及指南针和导航方式有关。 sass表现为@import

The errors: mostly related to paths and how compass & sass behave with @import

我对上述步骤的更正：

1 ）您不能在那一个上做错...


2）首先，不要将整个文件夹放在css目录中。每种类型的文件都应放在其目录中，因此sass目录下的.scss文件，css / fonts目录下的字体文件（.ttf，.woff等）。

1) You can't do wrong on that one...

2) First, don't put the whole folder in the css directory. Each type of file should go in its directory, so the .scss files under the sass directory, the font files (.ttf, .woff, etc) under css/fonts directory.

这在Sass中很重要，因为 @import 的工作方式。在 Sass参考书中说

That's important in Sass because of the way @import works. In the Sass Reference says

Sass在当前目录以及Rack，Rails或Merb下的Sass文件目录中查找其他Sass文件。可以使用：load_paths选项或命令行上的--load-path选项指定其他搜索目录。

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 无法找到它们的原因。

I overlooked that and place my .scss files in other directory and that's why with a normal @import they couldn't be found. Which leads us to the next point.

3）尝试将.scss文件作为url（）导入是很愚蠢的，我之所以这样做是因为 @import 无法正常工作。将font-awesome.scss文件放在我的sass目录中后，现在我可以 @import font-awesome / font-awesome.scss

3) It was silly to try to import a .scss file as an url(), I tried to do so because a regular @import was not working. Once the font-awesome.scss file was in my sass directory, I could now @import "font-awesome/font-awesome.scss"

4）同样， @import 路径是相对于.scss文件的，并且只要font-awesome.scss及其

4) Same here, @import paths are relative to the .scss files and as long as font-awesome.scss and its partials are in the same folder, no need to touch these.

5）是的，您需要更改 @FontAwesomePath 匹配您的字体目录

5) That was right, you need to change the @FontAwesomePath to match your fonts directory

6）确定您需要HTML示例进行测试，所以可以在这里

6) Sure you need an HTML example for testing, so ok here

7）没必要，它已经在我要导入的font-awesome.scss中。

7) That was unnecessary, it's already in the font-awesome.scss I'm importing. DRY.

8）与上述相同，也不必要。

8) Same as above, unnecessary too.

9& 10）是的，女孩，很好！

9 & 10) Yeah girl, good job

所以，从中学到什么：两次检查您的路径记下Sass中的@import如何（默认情况下）仅在当前sass目录中显示。

So, what to learn from this: check your paths twice taking into account how @import in Sass only looks (by default) at your current sass directory.

这篇关于在Sass中使用FontAwesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！