Question

每当我尝试在React的render()中使用Font Awesome图标时，它都不会显示在生成的网页上，尽管它可以在普通HTML中使用。

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

以下是一个实例：http://jsfiddle.net/pLWS3/

错在哪里？

Answer 1

如果您 JS 并使用 create-react-app cli 命令创建应用程序，请运行以下NPM命令以包含最新版本的字体真棒。

npm install --save font-awesome

将index-awesome导入index.js文件。只需将以下行添加到index.js文件
即可
import '../node_modules/font-awesome/css/font-awesome.min.css';

或

import 'font-awesome/css/font-awesome.min.css';

请勿忘记使用 className 作为属性

render: function() { return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>; }

Answer 2

React使用className属性，就像DOM一样。

如果您使用开发版本，并查看控制台，则会出现警告。你可以在jsfiddle上看到这个。

警告：未知的DOM属性类。你的意思是className吗？

Answer 3

您还可以使用react-fontawesome图标库。这是链接：react-fontawesome

从NPM页面，只需通过npm安装：

npm install --save react-fontawesome

需要模块：

var FontAwesome = require('react-fontawesome');

最后，使用<FontAwesome />组件并传入属性以指定图标和样式：

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

不要忘记将font-awesome CSS添加到index.html：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Answer 4

安装fontawesome＆amp;反应-fontawesome

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular

比你的组件

import React, { Component } from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

Answer 5

npm install --save-dev @fortawesome/fontawesome-free

在index.js中

import '@fortawesome/fontawesome-free/css/all.min.css';

然后使用如下图标：

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;

Answer 6

最简单的解决方案是：

安装：

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

导入：

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

使用：

<FontAwesomeIcon icon={ faThumbsUp }/>

Answer 7

您需要先安装软件包。

npm install --save react-fontawesome

OR

npm i --save @fortawesome/react-fontawesome

请勿忘记使用className代替class。

稍后您需要将它们导入您想要使用它们的文件中。

import 'font-awesome/css/font-awesome.min.css'

或

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Answer 8

public int **Query_Id** { get; set; }

然后

npm install --save font-awesome

import 'font-awesome/css/font-awesome.min.css';

Answer 9

亚历山大从上面的答案真的帮助了我！

我试图在我使用ReactJS创建的应用程序的页脚中获取社交帐户图标，以便我可以轻松地向他们添加悬停状态，同时让他们链接我的社交帐户。这就是我最终要做的事情：

$ npm i --save @fortawesome/fontawesome-free-brands

然后在我的页脚组件的顶部，我包含了这个：

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

我的组件看起来像这样：

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

像魅力一样工作。

Answer 10

经过一段时间的努力后，我想到了以下步骤（基于Font Awesome的文档here）：

如前所述，您必须安装 fontawesome ， react-fontawesome 和 fontawesome图标库：

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

，然后将所有内容导入到您的React应用程序：

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

library.add(faStroopwafel)

这是棘手的部分：

要更改或添加图标，您必须在节点模块库中找到可用的图标，即

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons

每个图标都有两个相关文件：.js和.d.ts，文件名指示导入短语（非常明显...），因此添加了生气， gem < / strong>和复选标记图标如下所示：

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons' library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

要在React js代码中使用图标，请使用：

<FontAwesomeIcon icon=icon_name/>

可以在相关图标的.js文件中找到图标名称：

例如对于 faCheckCircle ，请在 faCheckCircle.js 中查找“ iconName ”变量：

... var iconName = 'check-circle'; ...

，React代码应如下所示：

<FontAwesomeIcon icon=check-circle/>

祝你好运！

Answer 11

我遇到过这种情况;我需要在生产中完美运行的react / redux站点。

但是有'严格模式';不应该用这些命令午餐。

Auxiliary

应该只使用build / index.html文件。当我使用fontawesome和npm font-awesome时，它在开发模式下工作但不能在'严格模式'下工作。

这是我的解决方案：

yarn global add serve
serve -s build

in public / index.html

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

完成上述所有步骤后，fontawesome工作得很快!!!!

Answer 12

就我个人而言，我发现 react-fontawesome 很笨拙，因为它需要单独导入每个图标。如果您想在不使用 react-fontawsome 的情况下将 Font Awesome 版本 5 与 React 一起使用，您可以这样做：

从这里下载 fontawesome 免费包：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
在 React 应用的“public”目录中创建一个目录“fontawesome”。
将下载的 zip 中的“css”和“webfonts”目录复制到此文件夹中。
将以下行添加到“index.html”文件的“head”标签中：

<link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet">

您现在可以按常规方式使用 Font Awesome 图标：

<i className="fas fa-globe-europe"></i>

Answer 13

正如'Praveen M P'所说，你可以安装font-awesome作为一个包。如果你有纱线你可以运行：

 yarn add font-awesome

如果你没有像Praveen所说的做纱线那么做：

npm install --save font-awesome

这会将软件包添加到项目依赖项中，并将软件包安装在node_modules文件夹中。在你的App.js文件中添加

import 'font-awesome/css/font-awesome.min.css'

Answer 14

结帐react icons非常麻烦并且运作良好。

Answer 15

就我而言，我遵循的是react-fontawesome软件包的文档，但是在将图标设置到库中时，他们不清楚如何调用图标

这就是我在做什么：

App.js文件

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

组件文件

<FontAwesomeIcon icon={"coffee"} />

但是我遇到了这个错误

然后我在传递图标道具时添加了别名，例如：

<FontAwesomeIcon icon={["fal", "coffee"]} />

它正在运行，您可以在icon.js文件中找到前缀值，在我的情况下是：faCoffee.js

Answer 16

如果您希望包括字体真棒库而不必执行模块导入和npm安装，请将其放在React index.html 页面的开头部分：

public / index.html （在顶部）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

然后在您的组件（例如App.js）中仅使用标准字体真棒类约定。只要记住使用className而不是class即可：

<button className='btn'><i className='fa fa-home'></i></button>

如何在React的渲染（）中包含一个Font Awesome图标

16 个答案: