如何找到 Font Awesome 的图标名称以使用 React 导入？

Question

我已经将 Font Awesome 图标库添加到我的 React 项目中。根据文档，我正在创建一个库但无法添加图标，因为我不知道要导入的图标名称。

例如 - 在网站上的图标是 "coffee"。但是要添加到我需要使用的库 -

library.add(faCoffee)

然后我可以将它用作 -

如何找到图标 React 名称，即咖啡的 faCoffee？

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee);

<FontAwesome icon="coffee" />

Answer 1

我认为

fa 是 font awesome 的缩写。你可以从这里找到所有的图标名称 here

如果要使用图标，只需在导入时附加 fa，使用时不使用 fa。

查看沙盒 here

Answer 2

对于流行的图标包，我会考虑使用 react-icons 而不是 @fortawesome 包。React-icons 很好，因为它提供了 ES6 对各种流行图标的支持，允许一个仅包括您的 react 项目中实际使用的图标。 react-icons 中一些受支持的流行图标包如下：

字体很棒
离子图标
Material 设计图标
典型人物
完整列表还有更多 here

对于您的特定情况，您可以轻松地使用 Font Awesome 图标并通过执行以下操作来搜索您尝试使用的图标的确切名称：

安装 react-icons 包

npm install react-icons --save
搜索您想要的图标和准确的导入名称here
在您的 react 项目中导入并使用所需的图标，例如 Font Awesome 咖啡图标：

import { FaCoffee } from 'react-icons/fa'; <FaCoffee />

react-icons 包非常易于使用，根据我的经验，react 项目的其他图标包没有那么复杂。

希望对您有所帮助！

Answer 3

您可以找到所有 Fontawesome 图标名称 here

Answer 4

我会回答这个问题，尽管它已经过时了，我相信你能弄明白，只是因为实际上没有人正确回答你的问题。

您可以找到很棒的字体图标 here。

当您点击图标时，您会看到图标名称，例如'arrow-circle-left' 但为了像上面的示例一样使用它，您必须将 'fa' 添加到开头并将其余部分转换为驼峰式大小写。 IE。 'arrow-circle-left' 变为 'faArrowCircleLeft'.

然后您可以使用以下方式导入它：

    import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'

不知道为什么他们不能 post 在某处列出这些名字。

如何找到 Font Awesome 的图标名称以使用 React 导入？

How to find Icon names for Font Awesome to import with React?

font-awesome

reactjs