Font-Awesome 圖標未顯示在我的 ReactJS 網站中

Question

我正在嘗試在我正在處理的 React 項目中使用我網站標題旁邊的字體，但它沒有顯示。

我已經通過 yarn 導入了font-awesome包，並在我的 index.js 文件中導入了它的 css，但它沒有顯示在我的標題中。

索引.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

ReactDOM.render(<App />, document.getElementById("root"));

標題組件：

import React, { Component } from "react";

export default class Header extends Component {
  render() {
    return (
      <div>
        <div className="col-md-6 m-auto">
          <h1 className="text-center mb-3">
            <i className="fas fa-book-open"> </i>
            English Dictionary
          </h1>
        </div>
      </div>
    );
  }
}

僅顯示標題的文本。 我檢查了瀏覽器是否有任何錯誤，但沒有顯示任何錯誤，當我檢查頁面時，我也看到了該元素。

<i className="fas fa-book-open"> </i>

希望大家幫幫我，謝謝！

Answer 1

您需要按照以下步驟使用font-awesome和react ：

安裝這些依賴項：

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

在需要使用它們的地方進行必要的導入：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'

在 JSX 中使用：

<FontAwesomeIcon icon={faTimes} />