webpack Font Awesome 5 fa-github，fa-twitter，etc. not working(squares)

uplii1fm 于 5个月前发布在 Webpack

关注(0)|答案(2)|浏览(72)

我有一个网站，用webpack设置。我添加了Font Awesome Pro并为其配置了全局令牌。所以Pro图标工作正常。
但有些图标没有，比如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",
}

字符串
main.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';

型
webpack：

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文件吗？我没有找到任何。
编辑：添加了文件夹结构的照片：

的数据

webpack

来源：https://stackoverflow.com/questions/49687261/font-awesome-5-fa-github-fa-twitter-etc-not-working-squares

2条答案

按热度按时间

7kjnsjlb1#

或者，
你可以用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