Question

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

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

但现在呢？有人能指出我现在如何实际导入或使用它吗？谢谢。

Answer 1

来自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 2

首先使用 NPM 进行安装：

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

现在有两种方法，一种方法是将绝对 URL 嵌入到 HEAD 部分中，或者如果您使用的是 SASS（SCSS）< / strong>，您可以像这样将其导入您的 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-最后导入常规，实心或浅色（专业版）的图标类型：

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

毕竟，您可以为这些类分配 font-family ：

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

Answer 3

像这样的东西

// ------------ FONT-AWESOME -------------------- //

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

@import   ＆＃39; ../../ node_modules / @ fortawesome / fontawesome-自由网络字体/ SCSS / fontawesome＆＃39 ;;

@import   ＆＃39; ../../ node_modules / @ fortawesome / fontawesome-自由网络字体/ SCSS / FA-品牌＆＃39 ;;

@import   ＆＃39; ../../ node_modules / @ fortawesome / fontawesome-自由网络字体/ SCSS / FA-定期＆＃39 ;;

@import   ＆＃39; ../../ node_modules / @ fortawesome / fontawesome-自由网络字体/ SCSS / FA-固体＆＃39 ;;

Answer 4

要在前端使用npm模块，您最需要使用webpack，gulp或grunt进行某种转换。

然后在您的应用程序的入口点，在您编写html / jsx /其他一些html-esque代码之前，您需要从font-awesome npm模块中要求或导入css文件。

// es6/babel import
import 'font-awesome/css/font-awesome.min.css';

// browserify require statement if not using babel/es6
require('font-awesome/css/font-awesome.min.css');

例如继承人我用webpack / babel做的反应应用程序和入口点文件我从font-awesome导入css文件：https://github.com/AkyunaAkish/akyuna_akish/blob/master/client/index.js

供参考：我用了

npm install --save font-awesome

而不是您使用的命令。如果我们的包稍有不同，您可能需要调整import / require语句文件路径以指向font-awesome node_module包中的主css文件。

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

4 个答案: