Font-Awesome 图标未显示在我的 ReactJS 网站中

IT技术 javascript html reactjs font-awesome
2021-05-18 21:03:21

我正在尝试在我正在处理的 React 项目中使用我网站标题旁边的字体,但它没有显示。

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

索引.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>

希望大家帮帮我,谢谢!

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