FontAwesome 5 NPM图标问题

Question

我正在尝试使用NPM和Webpack将FontAwesome5实现到我的网站。这是我的代码：

import fontawesome from '@fortawesome/fontawesome'
import faFacebookF from '@fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '@fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '@fortawesome/fontawesome-free-brands/faInstagram'

fontawesome.library.add(faYoutube)
fontawesome.library.add(faFacebookF)
fontawesome.library.add(faInstagram)

情况是：只有fontawesome.library.add中添加的第一个图标才有效，而其他图标则不然。在此示例中，仅呈现Youtube图标，其他类似于：

如果我只是更改订单并将Facebook图标放在顶部，那就是：

import fontawesome from '@fortawesome/fontawesome'
import faFacebookF from '@fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '@fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '@fortawesome/fontawesome-free-brands/faInstagram'

fontawesome.library.add(faFacebookF)
fontawesome.library.add(faYoutube)
fontawesome.library.add(faInstagram)

只有Facebook图标可以这样工作：

JS或HTML中没有其他更改，只有图标顺序。如果我在顶部放置另一个未在我的HTML中使用的图标 - 所有3个图标都将为空。

你能帮我解决这个奇怪的问题吗？

P.S在devtools或webpack中没有js问题

Answer 1

由于只使用了一个包 - 'fontawesome-free-brands'，你应该使用像这样的昏迷分类列表：

fontawesome.library.add(faFacebookF,faYoutube,faInstagram)