在 Sass 中使用 FontAwesome

Posted 2023-03-07

技术标签:

【中文标题】在 Sass 中使用 FontAwesome【英文标题】：Using FontAwesome with Sass 【发布时间】：2013-09-05 09:32:50 【问题描述】：

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

输出

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

我已经完成的步骤

font-awesome

project/css/font-awesome

font-awesome.scss

@import url("font-awesome/scss/font-awesome.scss");

font-awesome.scss

@import url("font-awesome/scss/_variables.scss");

_variables.scss

@FontAwesomePath

"font-awesome/font/"

html

<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

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

【问题讨论】：

【参考方案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 目录中显示（默认情况下）。

【讨论】：

感谢您的解决方案。你的最后一句话真的很重要。我可以补充一下，您需要注意您的前缀。所以在你的例子中它有一个“icon-camera-retro”类，我实际上不得不使用“fa fa-camera-retro”。希望这可以帮助任何被困在最后一点的人！ node sass 使用 includePaths，见github.com/sass/node-sass#includepaths 对于寻求 Font Awesome 指导的任何人，请访问 - fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass【参考方案2】：

这对我有用：

运行命令：

npm install font-awesome --save-dev

将这些行添加到 index.scss：

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

【讨论】：

看来这个 npm 包是一个非官方的过时的包。【参考方案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';

注意：您不必导入所有类型的图标。

【讨论】：

此博客提供了更多详细信息：blog.logrocket.com/…【参考方案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";

【讨论】：

请在答案本身中包含链接中的相关详细信息。不幸的是，链接死了，然后答案将变得毫无用处。【参考方案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";

【讨论】：