為什麼要使用gulp編譯@fortawesome/fontawesome-free到CSS中？

Font Awesome 字型圖示如果通過引用的方式加入到網站中會增加http請求，如果通過gulp編譯@fortawesome/fontawesome-free到CSS中避免webfonts404錯誤，需要定義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";