Font-Awesome 图标未显示在我的 ReactJS 网站中 [英] Font-Awesome icon does not show in my ReactJS website

问题描述

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

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

index.js:

从react"导入React；从react-dom"导入 ReactDOM；导入./index.css"；从./App"导入应用程序；导入../node_modules/bootstrap/dist/css/bootstrap.min.css"；导入../node_modules/font-awesome/css/font-awesome.min.css"；ReactDOM.render(, document.getElementById("root"));

标题组件:

import React, { Component } from "react";导出默认类头扩展组件{使成为() {返回 (<div><div className="col-md-6 m-auto"><h1 className="text-center mb-3"><i className="fas fa-book-open"></i>英语词典

);}}

仅显示标题的文本.我检查了浏览器是否有任何错误，但没有显示任何错误，同样，当我检查页面时，我会看到该元素.

</i>

希望大家帮帮我，谢谢！

解决方案

您需要按照以下步骤使用 font-awesome 和 react:

安装这些依赖项:

npm i @fortawesome/fontawesome-svg-corenpm i @fortawesome/free-solid-svg-iconsnpm i @fortawesome/react-fontawesome

在需要使用的地方进行必要的导入:

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

在 JSX 中使用:

I'm trying to use a font next to my website's header in a react project I`m working on but it does not show.

I have imported the font-awesome package via yarn and imported the css of it in my index.js file but it does not show in my header.

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"));

Header Component:

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>
    );
  }
}

Only the text of the header is shown. I checked the browser for any errors and it did not show any, also when i inspect the page i see the element.

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

I hope any of you can help me, thanks!

解决方案

You will need to follow these steps to use font-awesome with react:

Install these dependencies:

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

Make necessary imports where you need to use them:

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

Use in JSX:

<FontAwesomeIcon icon={faTimes} />

这篇关于Font-Awesome 图标未显示在我的 ReactJS 网站中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！