如何在反应项目中反映字体真棒图标？

Posted 2023-02-21

【中文标题】如何在反应项目中反映字体真棒图标？

【英文标题】：How to reflect font awesome icons in the react project?

【发布时间】：2021-12-03 13:28:51

【问题描述】：

我已将 CDN 链接添加到我的 React 项目的 index.html 中。

你可以在这个repo中查看

在第 16 行添加了这一行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

并将 i 标签添加到我的组件中。 第14，15行在这个file

<Nav className="mr-auto">
    <Nav.Link href="/cart"><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
    <Nav.Link href="/login"><i className="fas fa-user"></i>Login</Nav.Link>
  </Nav>

但是，页面没有显示图标。

请建议，如何解决这个问题？

回购链接：github

【参考方案1】：

要开始使用，您需要使用 npm 和 yarn 等软件包管理器将以下软件包安装到您的项目中。 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

---

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

---

并且只需像这样使用

import  FontAwesomeIcon  from '@fortawesome/react-fontawesome'
import  faCoffee  from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon=faCoffee />

【讨论】：

添加cdn链接不行吗？

谢谢，我用同样的方法更新了图标引用

@SaraJune 我在官方文档中没有找到关于这个主题的任何内容（CDN 链接）。不客气，很高兴为您提供帮助 :-)！