如何使用通过NPM安装的字体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

由古尔普

在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

要在前端使用 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 制作的一个 React 应用程序，在入口点文件上，我从 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 文件。