无法使用 fontawesome 的 react-js 库显示图标答案

【问题标题】：Can't show icon with fontawesome's react-js library无法使用 fontawesome 的 react-js 库显示图标
【发布时间】：2022-01-13 15:02:20
【问题描述】：

import "./App.css";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

function App() {
return (
<div className="container">
  <input type="text" className="form-control" placeholder="Ara..." id="search_input"> 
</input>
  <button type="button" className="btn btn-light" id="search_button"><FontAwesomeIcon 
icon="search" /></button>

  <button type="button" className="btn btn-primary" id="buttons">E-Twinning</button>
  <button type="button" className="btn btn-primary" id="buttons">Erasmus</button>
</div>
 );
 }

export default App;

我需要帮助解决这个问题。我在后台有一个 png 和 svg 文件我尝试显示到 svg 和 png 文件，但它没有用。我尝试了上述两种方法，但都工作错误。

【问题讨论】：

标签： javascript html reactjs bootstrap-4 font-awesome

【解决方案1】：

要在 icon 属性中使用字符串（您使用的方式），您需要使用 library.add() 添加这些图标以使其工作。

阅读更多here。检查“通过全局使用使用图标”部分

另一种方法是导入单个图标并使用它们。

import { faSearch } from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faSearch} />

【讨论】：