使用FontAwesome和Sass

Question

我正在尝试在Web Compass项目中使用FontAwesome.由于FontAwesome页面中没有特定的文档,而且我没有使用Bootstrap,因此我遵循了"不使用Bootstrap？" 方向,但不能使它工作.

输出

我没有发现任何特定错误,无论是找不到还是编译错误.它只是没有显示任何内容,没有图标或文字.FontAwesome字体文件似乎没有加载.

我已经完成的步骤

1. 下载font-awesome目录
2. 将它复制到我的项目css文件夹,在那里我有我所有编译的css: project/css/font-awesome
3. font-awesome.scss像我这样在我的主sass样式表中导入文件@import url("font-awesome/scss/font-awesome.scss");
4. 打开font-awesome.scss文件并更改导入路径,现在相对于我的css编译文件,看起来像这样@import url("font-awesome/scss/_variables.scss");
5. 打开_variables.scssfont-awesome/scss目录中的partial,并将@FontAwesomePath默认值更改为"font-awesome/font/",以匹配webfonts的位置
6. 在我的html文件中,在FontAwesome示例页面中添加了一个示例,所以我添加了一个<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

好的,我得到了帮助,主要问题是路径有几个问题.我会在这里解释它们,以防它帮助我的位置.

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

错误:主要与路径以及指南针和sass在@import中的行为有关

我对上述步骤的更正:

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

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

这在Sass中很重要,因为它的@import工作方式.在Sass Reference中说

Sass在当前目录中查找其他Sass文件,在Rack,Rails或Merb下查找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及其partials在同一个文件夹中,就不需要触摸它们.

5)这是对的,您需要更改@FontAwesomePath以匹配您的字体目录

6)当然你需要一个HTML示例进行测试,所以确定

7)这是不必要的,它已经在我正在导入的字体-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';

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