fontawesome 5 with sass

The*_*ore 2 css fonts sass font-awesome-5

我在使用字体awesome 5和sass时遇到问题我已经按照他们网页上的说明开始了但是我似乎可以看到图标显示我有一个目录

C:\用户\ MYNAME \学习\ PUBLIC\SCSS \供应商\字体真棒\ fontawesome.scss

在我的public\scss文件夹中我有一个home.scss文件,我在其中导入fontawesome.scss如下

@import"vendors/font-awesome/fontawesome.scss";

当我编译代码时,它显示了fontawesome类和东西当我在网页上看到没有字体只是大白方进一步研究告诉我它没有加载webfonts我把webfonts文件夹放在我的项目在这个目录中

C:\用户\ MYNAME \学习\公共/网络字体

在_variables.scss文件中,我将fa-path修改为指向"../webfonts"; 但这没有任何作用我真的很感激任何有助于我解决这个问题的见解,因为遵循在线指令字体真棒5与sass似乎并不适合我.

Ian*_*ock 6

在你的主scss文件中:

你的文件夹结构有点不同,但它应该给你一个大致的想法.

//在你的主scss文件中

    @import "FontAwesome/fontawesome.scss";
    @import "FontAwesome/fa-light.scss";
Run Code Online (Sandbox Code Playgroud)

//在你的字体中有很棒的变量

    $fa-font-path: "../WebFonts" !default;
Run Code Online (Sandbox Code Playgroud)

//文件夹结构

   /stylesheets/mycompiled.css
Run Code Online (Sandbox Code Playgroud)

// Webfont位置

  /stylesheets/WebFonts
Run Code Online (Sandbox Code Playgroud)

可能你没有导入Light/Regular/Solid部分,因为其他一切看起来都很好.

如果仍然有问题,您可以指定绝对路径(假设/ public是您的根)

 $fa-font-path: "/WebFonts" !default;
Run Code Online (Sandbox Code Playgroud)

使用绝对路径,我的工作原理

$fa-font-path: "/stylesheets/WebFonts" !default;
Run Code Online (Sandbox Code Playgroud)