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

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- 最后导入常规、实心或浅色（专业版）图标类型：

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

毕竟你可以将 font-family 分配给这些类来工作：

.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

类似的东西

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

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

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-regular';

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

Answer 4

要在前端使用 npm 模块，您很可能需要使用 webpack、gulp 或 grunt 进行某种转译。

然后在您的应用程序的入口点，在您编写 html/jsx/其他一些 html 风格的代码之前，您需要从 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 文件。