Font Awesome 5 fa-github、fa-twitter 等不工作（正方形）

Question

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

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

这是我如何设置所有内容的代码：

包.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",
}

主文件：

$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班级，因为集合中没有社交图标font-awesome-pro-light。

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