社交媒体字体真棒图标在反应 js 中不起作用

Posted 2023-02-23

【中文标题】社交媒体字体真棒图标在反应 js 中不起作用

【英文标题】：Social Media font awesome icon is not working in react js

【发布时间】：2021-04-10 01:16:54

【问题描述】：

错误

尝试导入错误：“faTwitter”未从“@fortawesome/free-solid-svg-icons”导出。

我在 react js 中使用了很棒的字体图标，很少有图标像这样工作：- faPhoneAlt、faHeart、faBars、faChevronDown

但社交媒体图标不起作用。

代码

import React, Component from 'react';
import  FontAwesomeIcon  from '@fortawesome/react-fontawesome';
import faMapMarkerAlt, faPhoneAlt, faShoppingBag, faHeart, faBars, faChevronDown, faTwitter from '@fortawesome/free-solid-svg-icons';


<FontAwesomeIcon icon=faTwitter /></Link>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

为什么在 中使用关闭标签？

这通常发生在您使用旧版本的库时。尝试更新到最新版本。

【参考方案1】：

为此，您需要安装free-brands-svg-icons

https://www.npmjs.com/package/@fortawesome/free-brands-svg-icons

在文档中明确提到对于brands aka social media，您必须使用另一个包。

https://fontawesome.com/how-to-use/on-the-web/using-with/react

【讨论】：

我发现这可能会有所帮助github issue

感谢您的建议，但它适用于 html 而不是 react，因为在 HTML 中，您需要将 fas 用于实心品牌，fab 用于实心品牌