Question

我正在尝试在Web Compass项目中使用FontAwesome。由于FontAwesome page中没有特定的文档，我没有使用Bootstrap，我遵循了“不使用Bootstrap？”方向，但不能使它工作。

输出

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

我已经完成的步骤

下载font-awesome目录
将其复制到我的项目css文件夹，其中包含我编译的所有css：project/css/font-awesome
导入我的主sass样式表中的font-awesome.scss文件，例如@import url("font-awesome/scss/font-awesome.scss");
打开font-awesome.scss文件并更改导入路径，现在相对于我的css编译文件，看起来像这样@import url("font-awesome/scss/_variables.scss");
打开font-awesome / scss目录中的_variables.scss部分，默认情况下将@FontAwesomePath更改为"font-awesome/font/"，以匹配网络字体的位置
在我的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

好的，我得到了帮助，主要问题是路径有几个问题。我会在这里解释一下，以防有人担任我的职位。

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

错误：主要与路径以及指南针＆amp; sass表现为@import

对我上述步骤的更正：

1）你不能对那个做错...

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

由于@import的工作方式，这在Sass中非常重要。在Sass Reference中说

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

我忽略了这一点并将我的.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）这是不必要的，它已经在我正在导入的字体-awesome.scss中。 DRY。

8）同样如上所述，也是不必要的。

9＆amp; 10）是的女孩，干得好

那么，从中学到什么：检查你的路径两次，考虑到Sass中的@import只在当前的sass目录中查找（默认情况下）。

Answer 2

这对我有用：

运行命令：
```
npm install font-awesome --save-dev
```

将这些行添加到index.scss：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Answer 3

此方法有效，但每次设置新项目并链接所有文件时，都必须下载整个fontawesome文件夹。通过安装SASS Ruby Gem，您可以避免额外的工作。

Open Terminal and do:
gem install font-awesome-sass
Remember that you should have administrator rights on your computer.
If you are an administrator and getting this:

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

Try to install as super user:
sudo gem install font-awesome-sass
You’ll need to enter your password.

You should get this if installation was successful:

Successfully installed font-awesome-sass-4.1.0
Parsing documentation for font-awesome-sass-4.1.0
1 gem installed

Next open your sass file and import font-awesome library:
@import "/Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.1.0/vendor/assets/stylesheets/font-awesome";
I am a mac user and in my case the gem is installed into this location. You should figure out where it stores on your windows machine.
It’s important to use absolute path. It won’t work if you do:
@import "font-awesome”Because you installed ruby gem, it is not part of compass (as I mistakenly thought in the beginning).

Download fontAwesome from fontawesome.io and unzip it. Copy font-awesome fonts into your css folder under fonts directory. Like here:
Screen Shot 2014-08-28 at 2.14.07 PM

In your .sass add a font-face FontAwesome somewhere on top of the file:

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}

All set
Now you can use fontAwesome in your project!
Use FontAwesome inline with <i></i> tag or you can use it via @extend method in your SASS.
Inline method example:

Insert an <i></i> tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name]
<i style="margin:12px;" class="fa fa-camera-retro"></i>

More details about this method you’ll find here
fontawesome website

SASS @extend method example:

$your_selector {
  @extend .fa;
  @extend .fa-camera-retro;
  font-family: $verdana;
  &::before {
    font-family: "FontAwesome";
  }
}

Answer 4

使用免费版的最新版本，您必须使用：

yarn add @fortawesome/fontawesome-free

然后，在您的app.scss（如果使用Sass）中，您必须添加以下行：

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';

注意：您不必导入每种类型的图标。

Answer 5

安装自定义font-awesome sass的步骤。

下载font-awesome文件夹并将其解压缩。
打开提取的文件夹＆gt;＆gt; font-awesome / scss，你会发现font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的scss文件夹中。
将font-awesome文件夹中的fonts文件夹移动到项目文件夹＆gt;＆gt;项目/字体
打开_varaible.scss并将路径更改为

$ fa-font-path：“../ fonts”！default; {你在这种情况下的字体的相对路径是../../ fonts}

将font-awesome.css链接到您的头文件。

现在，你已经完成了

https://fortawesome.github.io/Font-Awesome/get-started/

Answer 6

通过

获取字体真棒

yarn add font-awesome 或

bower install font-awesome（不推荐）

现在转到font-awesome目录并复制fonts文件夹并将其粘贴到一个文件夹 css文件夹或scss文件夹。例如：

./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html

完成！

如果您不想复制字体文件夹，另一种方法是在main.scss文件中添加以下行：

$fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome";

使用字体真棒与Sass

输出

我已经完成的步骤

6 个答案: