css - Font Awesome 5 fa-github、fa-twitter 等不工作(正方形)

Question

我有一个网站，使用 webpack 设置。我添加了 Font Awesome Pro 并为其配置了全局 token 。所以 Pro Icons 正在工作。

但有些没有，比如 fa-github 或 fa-twitter。这些实际上甚至是免费图标。几天前他们工作了。

这是我设置所有内容的代码:

Package.json:

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-brands": "^5.0.9",
    "@fortawesome/fontawesome-pro-light": "^5.0.9",
    "@fortawesome/fontawesome-pro-regular": "^5.0.9",
    "@fortawesome/fontawesome-pro-solid": "^5.0.9",
    "@fortawesome/fontawesome-pro-webfonts": "^1.0.5",
}

主.scss:

$fa-font-path: "~@fortawesome/fontawesome-pro-webfonts/webfonts";
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-pro-webfonts/scss/fa-light.scss';

网页包:

resolve: {
    alias: {
      '@fortawesome/fontawesome-pro-solid$': '@fortawesome/fontawesome-pro-solid/shakable.es.js',
      '@fortawesome/fontawesome-pro-regular$': '@fortawesome/fontawesome-pro-regular/shakable.es.js',
      '@fortawesome/fontawesome-pro-light': '@fortawesome/fontawesome-pro-light/shakable.es.js'
    }
  },


<i class="fal fa-check"></i> // Does work
<i class="fal fa-github"></i> // Does not work
<i class="fal fa-twitter"></i> // Does not work

我错过了什么？我是否必须为此导入另一个 CSS 文件？我没有找到。

编辑:添加文件夹结构照片:

Answer 1

或者，

您可以使用 Javascript 方式导入 Font Awesome 图标。

import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(brands)

---

您将需要 @fortawesome/font-awesome-pro-brands为此打包。

使用 <i class="fab fa-github"></i>和 <i class="fab fa-twitter"></i>

您不能使用 fal对于类(class)，因为 font-awesome-pro-light 中没有社交图标设置。

参见:https://fontawesome.com/icons?d=gallery&q=github&s=light