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

Question

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 文件，但它没有用。我像上面那样尝试了两种方法，但都工作不正常。

Answer 1

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

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

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

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

<FontAwesomeIcon icon={faSearch} />

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

Can't show icon with fontawesome's react-js library

javascript

html

reactjs

bootstrap-4

font-awesome