将 font-awesome 正确添加到 gulp 项目答案

【问题标题】：Add font-awesome to gulp project correctly将 font-awesome 正确添加到 gulp 项目
【发布时间】：2023-03-18 23:38:01
【问题描述】：

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

【问题讨论】：

为什么不使用 CDN？
fontawesome.com/how-to-use/use-with-node-js

标签： sass gulp bootstrap-4 font-awesome

【解决方案1】：

1 下载 fontawesome 5

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

SCSS 文件中的 2 个

@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/'));
});

【讨论】：

他们的文档有一些额外的细节：fontawesome.com/how-to-use/on-the-web/using-with/sass 和 fontawesome.com/how-to-use/on-the-web/setup/… 例如，如果需要，您可以设置一个 $fa-font-path 来更改 webfonts 文件夹的位置，并使用他们的 mixins跨度>
另外，fontawesome 的第一次导入是必需的。下面的导入是针对特定样式的； fontawesome 团队不时添加新样式。我不确定垫片有多“需要”

【解决方案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">

【讨论】：

您建议的是 FontAwesome 的报废版本。
我在主 scss 中看到了带有 @import 字体的版本。这也是一种好习惯吗？
我认为 HTML 文件中的 link 通常比 CSS 文件中的 import 更受欢迎，因为浏览器将并行下载链接文件以加快页面加载速度。请参阅this 答案。

【解决方案3】：

其实是：

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

堡垒不是字体。

Better to link to directly, as the command may change

链接也可能会改变，但您可以随时在 fontawesome.com 上搜索

【讨论】：

最好不要“仅仅”链接，因为网页会移动。如果您的命令是特定于版本的，那也没关系。最好为链接提供一些上下文，引用相关命令并链接到更多信息。 stackoverflow.com/help/how-to-answer