如何在React的render()中包含一个Font Awesome图标

Question

每当我尝试在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/

故障在哪里？

Answer 1

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

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

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

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

Answer 4

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

而不是你的组件

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

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

如果您希望包含 font awesome 库而无需进行模块导入和 npm 安装，请将其放在 React index.html页面的 head 部分：

public/index.html（在 head 部分）

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

然后在您的组件（例如 App.js）中使用标准字体 awesome 类约定。请记住使用 className 而不是 class：

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

Answer 8

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

• 从 fontawesome 自己下载 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 9

正如“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 10

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 11

您需要先安装软件包。

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'

Answer 12

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

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

与此一挣扎后，当我来到了这个程序（基于字体真棒的文档在这里）：

如前所述，您将必须安装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/> 

祝好运！