代码之家 › 专栏 › 技术社区 › ithil

将FontAwesome与Sass一起使用

font-awesome compass-sass sass

ithil · 技术社区 · 11 年前

我正试图在一个网络指南针项目中使用FontAwesome。由于在 FontAwesome page ,并且我不使用Bootstrap,我遵循了“不使用Bootstrap?”的指示,但无法使其工作。

输出

我没有得到任何特定的错误,要么是找不到,要么是编译错误。它只是没有显示任何内容,没有图标或文本。FontAwesome字体文件似乎没有加载。

我所做的步骤

下载 font-awesome 目录
将它复制到我的项目css文件夹中,在那里我有所有编译的css: project/css/font-awesome
导入 font-awesome.scss 我的sass主样式表中的文件如下 @import url("font-awesome/scss/font-awesome.scss");
打开 字体-awesome.scss 文件并更改导入路径,使其现在相对于我的css编译文件,如下所示 @import url("font-awesome/scss/_variables.scss");
打开 _variables.scss 在font真棒/scs目录中进行部分操作,并更改 @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;
 }

使用编译我的主sass样式表 compass --watch 没有错误
已上载所有内容

为了帮助澄清,以下是我的项目结构:

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

所以,如果有人读到这里,我已经很感激了,有什么想法吗?

6 回复 | 直到 6 年前

ithil 11 年前

好吧,我得到了帮助,路径有几个问题是主要问题。我会在这里解释,以防对处于我这个位置的人有帮助。

问题是: 事实上,字体文件没有加载

错误: 主要与路径以及指南针&sass的行为与@import一致

对我上述步骤的更正:

1) 你不能在那件事上做错。。。

2) 首先,不要将整个文件夹放在css目录中。每种类型的文件都应该放在自己的目录中,所以sass目录下的.scs文件,css/font目录下的字体文件(.ttf、.woff等)。

这在萨斯很重要,因为 @import 作品在 Sass Reference 说

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

我忽略了这一点,把我的.scs文件放在了另一个目录中,这就是为什么使用普通的 @进口 他们找不到。这就引出了下一点。

3) 尝试将.scs文件作为url()导入是很愚蠢的,我尝试这样做是因为 @进口 不起作用。一旦font-awesome.scss文件在我的sass目录中,我现在就可以了 @import "font-awesome/font-awesome.scss"

4) 这里也是, @进口 路径是相对于.scs文件的,只要font-awesome.scss及其部分位于同一文件夹中,就不需要触摸这些文件。

5) 没错,你需要改变 @FontAwesomePath 以匹配您的字体目录

6) 当然,您需要一个HTML示例进行测试,所以在这里可以

7) 这是不必要的,它已经在我正在导入的font-awesome.scss中了。干燥。

8) 同上,也没有必要。

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

那么,从中可以学到什么 :检查您的路径两次,考虑到Sass中的@import只在您当前的Sass目录中看起来(默认情况下)。

Stephen Rauch Afsar Ali 7 年前

这对我来说很有效:

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

将这些行添加到index.scss:

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

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

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

Dave Bower Ekaterina Zdorov 7 年前

这种方法是有效的,但每次设置新项目并链接所有文件时,都必须下载整个font真棒文件夹。通过安装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";
  }
}

abe312 6 年前

通过以下方式获得出色的字体

yarn add font-awesome 或

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

Wasim Khan 9 年前

步骤安装自定义字体真棒sass。

下载字体很棒的文件夹并提取它。
打开提取的文件夹>>font真棒/scs,在那里你会找到font-awesome.scss和font真棒部分文件。将所有这些文件移到项目的scss文件夹中。
将字体真棒文件夹中的字体文件夹移动到您的项目文件夹>>项目/字体
打开_varaible.scs并将路径更改为

$fa字体路径:“../font”!违约{在这种情况下,字体的相对路径是../../font}

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

现在,你们都准备好了

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