正确添加font-awesome到gulp项目

Question

如何在我的新gulp-scss-bootstrap项目中添加和使用字体真棒？干净，正确的方法是什么？谢谢。

Answer 1

1下载fontawesome 5

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

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";

3在gulpfile.js中添加一个任务

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

Answer 2

使用NPM安装字体很棒。您可以将它添加到package.json：

  "devDependencies": {
    "bootstrap": "latest",
    "font-awesome": "latest",
etc

然后添加gulp任务以将文件从node_modules复制到部署中的目录：

gulp.task('copy', function() {
    gulp.src([
            'node_modules/font-awesome/**',
            '!node_modules/font-awesome/**/*.map',
            '!node_modules/font-awesome/.npmignore',
            '!node_modules/font-awesome/*.txt',
            '!node_modules/font-awesome/*.md',
            '!node_modules/font-awesome/*.json'
        ])
        .pipe(gulp.dest('vendor/font-awesome'))
etc

运行gulp copy，它应该为您设置目录。然后，您可以将字体导入index.html

<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Answer 3

它实际上是：

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

堡垒不是字体。

Better to link to directly, as the command may change

链接也可能会更改，但您始终可以在fontawesome.com上进行搜索