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

Posted 2023-02-21

【中文标题】无法使用 fontawesome 的 react-js 库显示图标

【英文标题】：Can't show icon with fontawesome's react-js library

【发布时间】：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 文件，但它没有用。我尝试了上述两种方法，但都工作错误。

【参考方案1】：

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

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

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

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

<FontAwesomeIcon icon=faSearch />