为什么要使用gulp编译@fortawesome/fontawesome-free到CSS中？

Font Awesome 字体图标如果通过引用的方式加入到网站中会增加http请求，如果通过gulp编译@fortawesome/fontawesome-free到CSS中避免webfonts 404错误，需要定义webfonts字体的地址。

Font Awesome

gulp编译@fortawesome/fontawesome-free

安装@fortawesome/fontawesome-free：

npm i -D @fortawesome/fontawesome-free

在你的scss文件(如style.scss)中引入fontawesome-free

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";

需要注意到是，这里必须引入scss文件，不要直接引入css文件，否则sass编译之后不会把文件内容编译到css中去。

配置webfonts变量地址，避免404错误。

新建_variables.scss加入

$fa-font-path:         "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts";

完整的style.scss：

@import "_variables";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";