在 Sass 中使用 FontAwesome

Question

我正在尝试在 Web Compass 项目中使用 FontAwesome。由于FontAwesome page 中没有具体的文档，而且我没有使用 Bootstrap，所以我遵循了“不使用 Bootstrap？”。指示，但无法使其工作。

输出

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

我已经完成的步骤

1. 下载font-awesome目录
2. 将它复制到我的项目 css 文件夹中，其中有我所有编译的 css：project/css/font-awesome
3. 在我的主 sass 样式表中导入 font-awesome.scss 文件，如下所示 @import url("font-awesome/scss/font-awesome.scss");
4. 打开font-awesome.scss 文件并更改导入路径，使其与我的css 编译文件相关，如下所示@import url("font-awesome/scss/_variables.scss");
5. 打开 font-awesome/scss 目录中的 _variables.scss 部分，并将 @FontAwesomePath 从默认更改为 "font-awesome/font/"，以匹配 webfonts 的位置
6. 在我的html文件中，在FontAwesome examples page后面添加了一个示例，所以我添加了<i class="icon-camera-retro"></i> Some text

7. 在我的主 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;
     }
   

8. 在选择器中扩展字体

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

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

10. 已上传所有内容

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

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 在当前目录以及 Rack、Rails 或 Merb 下的 Sass 文件目录中查找其他 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) 那是不必要的，它已经在我正在导入的 font-awesome.scss 中。干燥。

8) 同上，也不需要。

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

那么，从中学到什么：检查您的路径两次，同时考虑到 Sass 中的 @import 仅在您当前的 sass 目录中显示（默认情况下）。

Answer 2

这对我有用：

1. 运行命令：

   npm install font-awesome --save-dev
   

2. 将这些行添加到 index.scss：

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

Answer 3

使用免费版的最后一个版本，你必须使用：

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 4

此方法有效，但每次设置新项目并链接所有文件时，您都必须下载整个 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 5

通过

获得令人敬畏的字体

yarn add font-awesome 或

bower install font-awesome（不推荐）

现在转到 font-awesome 目录并复制字体文件夹 并将其粘贴一个文件夹到 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";

Answer 6

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

1. 下载font-awesome文件夹并解压。

2. 打开解压后的文件夹>>font-awesome/scss，里面有font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的 scss 文件夹中。

3. 将 font-awesome 文件夹中的字体文件夹移动到您的项目文件夹 >> Project/fonts

4. 打开 _varaible.scss 并将路径更改为

$fa-font-path: "../fonts" !default; {在这种情况下，您的字体相对路径是 ../../fonts}

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

现在，一切准备就绪

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