如何使用通过NPM安装的字体awe5

Question

我没有找到任何关于下一步做什么的文档，我通过npm安装到我的项目中，

$ npm install --save @fortawesome/fontawesome-free-webfonts

但是现在呢？现在有谁能告诉我如何实际导入或使用它吗？谢谢。

Answer 1

首先使用NPM安装它：

npm install @fortawesome/fontawesome-free --save-dev

现在您有两种方法，一种方法是将绝对URL嵌入到HEAD部分中，或者如果您使用类似SASS(SCSS)的内容，则可以将其导入到custom.scss文件中，如下所示：

1-首先为webfonts设置绝对路径(必须在fontawesome.scss之前设置)：

$fa-font-path: "node_modules/@fortawesome/fontawesome-free/WebFonts" !default;

2-然后导入fontawesome.scss：

@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

3-最后导入常规、实体或轻型(pro版本)的图标类型：

@import "node_modules/@fortawesome/fontawesome-free/scss/regular";

毕竟，您可以将字体系列分配给这些类来工作：

.fa,.fas,.far,.fal,.fab {
  font-family: "Font Awesome 5 Free";
}

Answer 2

按Gulp

在SCSS文件中

@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";

在gulpfile.js中

gulp.task('icons', function() {
    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(gulp.dest(dist+'/assets/webfonts/'));
});

Answer 3

像这样的东西

// -/

    $fa-font-path: $fonts_path + 'font-awesome';

导入'../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome'；@

@导入'../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands'；

@导入'../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-regular'；

@导入'../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid';