sass - 在 Sass 中使用 FontAwesome

Question

我正在尝试在 Web Compass 项目中使用 FontAwesome。由于FontAwesome 页面中没有具体的文档，而且我没有使用 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");
打开_variables.scssfont-awesome/scss 目录中的部分并将@FontAwesomePath默认从一个更改为"font-awesome/font/"，以匹配 webfonts 所在的位置
在我的 html 文件中，在FontAwesome 示例页面中添加了一个示例，因此我添加了一个<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

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

score 42 · Accepted Answer

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

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

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

对我上述步骤的更正：

1）你不能在那个上做错......

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

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

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 目录中看起来（默认情况下）。

score 41 · Accepted Answer

这对我有用：

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

将这些行添加到 index.scss：

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

score 8 · Accepted Answer

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

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';

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

让字体真棒

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";

score 1 · Accepted Answer

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

下载 font-awesome 文件夹并解压。
打开解压出来的文件夹>>font-awesome/scss，里面有font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的 scss 文件夹中。
将 font-awesome 文件夹中的字体文件夹移动到您的项目文件夹 >> 项目/字体
打开 _varaible.scss 并将路径更改为

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

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

现在，你们都准备好了

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

sass - 在 Sass 中使用 FontAwesome

输出

我已经完成的步骤

6 回答 6

Related

Reference