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

Question

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

例如-网站上的图标为“咖啡”。但是要添加到库中，我需要使用-

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

我会回答这个问题，即使它很旧，我相信你能弄清楚，只是因为没有人真正正确地回答了你的问题。

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

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

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

C:\Users\Fotoacc\anaconda3\python.exe C:/Users/Fotoacc/pythonProject/train_yolo_3.2/test.py
[]

Process finished with exit code 0

不知道为什么他们不能在某处张贴这些名字的列表。

Answer 2

fa是我认为很棒的字体的缩写。您可以从此处找到所有图标名称 here

如果要使用该图标，则只需在导入时附加fa，然后再使用它，而无需使用fa。

请参阅沙箱here

Answer 3

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

1. 很棒的字体
2. 爱奥尼亚人
3. 材料设计图标
4. Typicons
5. 还有更多有关完整列表的信息，请查看here

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

1. 安装react-icons软件包

   npm install react-icons --save

2. 搜索所需的图标和确切的导入名称here

3. 在react项目中导入并使用所需的图标，例如Font Awesome coffee图标：

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

react-icons软件包非常易于使用，并且根据我的经验，它比react项目的其他图标软件包要简单。

希望有帮助！

Answer 4

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