如何在 React 项目中反映 font awesome 图标？

Question

我已将 CDN link 添加到我的 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 标签添加到我的组件中。这个file

中的第14,15行

<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>

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

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

回购 link：github

Answer 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} />

如何在 React 项目中反映 font awesome 图标？

How to reflect font awesome icons in the react project?

font-awesome

reactjs