使用Sass与FontAwesome

Question

使用Sass与FontAwesome

39

我正在尝试在Web Compass项目中使用FontAwesome。由于在FontAwesome页面中没有特定的文档，并且我没有使用Bootstrap，所以我按照"Not using 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示例页面中的一个示例，因此我添加了<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

所以如果有人已经读到这里，我非常感激，有什么想法请提出吗？

- ithil

6个回答

41

以下是我能做的：

运行以下命令：

npm install font-awesome --save-dev

将以下这些行添加到index.scss中:

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

- uri gat

1

这个npm包似乎是一个非官方的、过时的包。 - Vapid

10

使用免费版本的最新版本，您需要使用：

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

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

- Vincent Decaux

此博客提供更多细节： https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/ - Mahesh

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

- Ekaterina Zdorov

请在答案中包含链接中的相关细节。链接不幸会失效，那么答案就会变得无用。 - EWit

2

通过以下方式获取font-awesome：

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

- abe312

1

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

下载font-awesome文件夹并解压缩。
打开解压后的文件夹 >> font-awesome/scss，您会找到font-awesome.scss和font-awesome分部文件。将所有这些文件移动到项目的scss文件夹中。
将位于font-awesome文件夹内的fonts文件夹移动到您的项目文件夹中 >> Project/fonts
打开_varaible.scss并更改路径为

$fa-font-path: "../fonts" !default; {在此处为字体设置相对路径，例如 ../../fonts}

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

现在，您已经完成了所有设置。

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

- Wasim Khan

我正在使用Font Awesome的v5.12.1版本，现在字体文件夹被称为webfonts。虽然我认为应该是这样，但它对我没有起作用。甚至我尝试重新编译标准的fontawesome，但结果仍然是空白内容。fa-phone:before{content:""} - TheArchitecta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ithil · Accepted Answer

好的，我得到了帮助，并且路径问题是主要问题。我将在这里解释它们，以便帮助处于我的位置的人。

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

错误原因：大多与路径有关，以及compass和sass在@import时的行为

我上述步骤的更正：

1）您不能做错这一点……

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

在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文件。DRY原则。

8) 和上面一样，也是不必要的。

9 & 10) 好的，做得好。

所以，从中可以学到什么: 必须认真检查你的路径，考虑到Sass中的@import默认只在当前sass目录中查找。