如何在React的render（）中包括一个Font Awesome图标

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

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

这是一个实时示例：http : //jsfiddle.net/pLWS3/

哪里错了？

React使用className属性，例如DOM。

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

警告：未知的DOM属性类。您是说className吗？

如果您不熟悉React JS，并使用create-react-app cli命令创建应用程序，请运行以下NPM命令以包括最新版本的font-awesome。

npm install --save font-awesome

将font-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>;
}

您也可以使用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)' }}
      />
    );
  }
});

不要忘记将字体真棒的CSS添加到index.html：

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

https://github.com/FortAwesome/react-fontawesome

安装fontawesome和react-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
$ npm i --save @fortawesome/fontawesome-svg-core

然后在你的组件中

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;

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;

最简单的解决方案是：

安装：

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

您需要先安装软件包。

npm install --save react-fontawesome

要么

npm i --save @fortawesome/react-fontawesome

不要忘记使用className代替class。

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

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

要么

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

经过一段时间的努力后，我想到了这个程序（基于Font Awesome的文档，在这里）：

如前所述，您必须安装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，文件名指示导入短语（非常明显...），因此添加Angry，Gem和选中标记图标如下所示：

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

祝好运！

亚历山大从上方的回答确实帮助了我！

我试图在用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>

像魅力一样工作。

如果您希望包括字体真棒库而不必执行模块导入和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>

npm install --save font-awesome

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

然后

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

我经历过这种情况。我需要应在生产中正常运行的react / redux站点。

但是有一个“严格模式”；不应该用这些命令吃午餐。

yarn global add serve
serve -s build

应该只使用build / index.html文件。当我将fontawesome与npm font-awesome一起使用时，它在开发模式下工作，但在“严格模式”下工作。

这是我的解决方案：

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 ***

在public / index.html中

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

完成上述所有步骤后，fontawesome的效果很好！！！

正如“ Praveen MP”所说，您可以将font-awesome作为软件包安装。如果您有纱线，可以运行：

 yarn add font-awesome

如果您没有毛线，请按照Praveen所说的做：

npm install --save font-awesome

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

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

结帐反应图标很漂亮并且工作得很好。

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

这就是我在做什么：

App.js文件

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

组件文件

<FontAwesomeIcon icon={"coffee"} />

但是我得到这个错误

然后我在传递图标prop时添加了别名：

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

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