字体神器(Font-Awesome)图标在我的ReactJS网站上无法显示

Question

我正在制作一个React项目，希望在我的网站标题旁使用字体，但它无法显示。

我已经通过yarn导入了font-awesome包，并在我的index.js文件中导入了其CSS文件，但它没有显示在我的标题中。

index.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>

我希望你能帮助我，谢谢！

这与IT技术有关，请不要删除任何HTML标签。

- nadav atar

---

你所加载的FA版本中是否存在那个特定的图标？ - isherwood

Answer 1

使用react和font-awesome，您需要按照以下步骤进行操作:

安装这些依赖项：

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} />

- Anurag Srivastava

---

或者只需从CDN加载Font Awesome到您的HTML文件中。 - user8672473