Sass 正确地将字体添加到gulp项目中

如何在新的gulp scss引导项目中添加和使用font awesome？清洁和正确的方法是什么？谢谢。

使用NPM安装font awesome。您可以将其添加到package.json中：

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

然后添加一个gulp任务，将文件从节点_模块复制到部署中的目录：

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

运行

gulpcopy

，它会为您设置目录。然后可以将字体导入index.html

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

---

1下载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/'));
});

事实上：

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

不是字体

---

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

为什么不使用CDN？您建议的是fontawesome的过期版本。我在主SCS中看到了带有@import font awsome的版本。这也是一种很好的做法吗？我认为HTML文件中的

链接

通常比CSS文件中的

导入

更受欢迎，因为浏览器将并行下载链接文件以更快地加载页面。请参阅答案。当网页移动时，最好不要“仅仅”链接。如果您的命令是特定于版本的，则可以。最好为链接提供一些上下文，引用相关命令，并链接到更多信息。他们的文档有一些额外的细节：例如，您可以设置

$fa字体路径

，根据需要更改webfonts文件夹的位置，并使用他们的mixin。此外，还需要第一次导入

字体路径

。接下来的导入是针对特定样式的；fontawesome团队不时添加新样式。我不确定垫片“需要”的程度