为什么要使用gulp编译@fortawesome/fontawesome-free到CSS中？
Font Awesome 字体图标如果通过引用的方式加入到网站中会增加http请求，如果通过gulp编译@fortawesome/fontawesome-free到CSS中避免webfonts 404错误，需要定义webfonts字体的地址。
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";