在Sass中使用FontAwesome

卡卡西 · 03月23日

我正在尝试在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没有任何错误

  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


因此,如果有人读过这里(我已经很感激),请问有什么想法吗?

CSSsass
回答(4)
时间
小小
4 · 2020-03-23 09:33:12

对我有用:

  1. 运行命令:

    npm install font-awesome --save-dev
    
  2. 将这些行添加到index.scss:

    $fa-font-path: "~font-awesome/fonts";
    @import "~font-awesome/scss/font-awesome";
    
小胖
3 · 2020-03-23 09:33:12

通过获得真棒字体

yarn add font-awesome 要么

bower install font-awesome (不建议)

现在转到font-awesome目录,复制fonts文件夹,并将其粘贴到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";

番长
2 · 2020-03-23 09:33:12

好的,我对此有所帮助,并且路径有几个主要问题。我将在这里解释它们,以防它对我的位置有所帮助。

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

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

我上述步骤的更正:

1)您不能在那上面做错...

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

由于工作方式,这在Sass中很重要@import萨斯参考

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目录中看起来(默认)。

小卤蛋
1 · 2020-03-23 09:33:12

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

  1. 下载真棒字体文件夹并将其解压缩。

  2. 打开提取的文件夹>> font-awesome / scss,在这里您会找到font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的scss文件夹中。

  3. 将font-awesome文件夹内的fonts文件夹移到您的项目文件夹>> Project / fonts

  4. 打开_varaible.scss并将路径更改为

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

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

现在,您已经准备就绪

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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序