如何在 React 的 render() 中包含 Font Awesome 图标答案

【问题标题】：How to include a Font Awesome icon in React's render()如何在 React 的 render() 中包含 Font Awesome 图标
【发布时间】：2014-05-31 17:57:02
【问题描述】：

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

错在哪里？

【问题讨论】：

请注意，一些较旧的答案是指react-fontawesome，它是v4，还有一些是指支持v5 的官方@fortawesome/fontawesome 组件。
这是支持版本 5 的 react-fontawesome 的当前链接：github.com/FortAwesome/react-fontawesome

标签： reactjs font-awesome

【解决方案1】：

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

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

警告：未知的 DOM 属性类。你是说类名吗？

【讨论】：

是否可以工作 reactjs 15.6 我添加了链接 index.html maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/…"> 但不能工作

【解决方案2】：

您还可以使用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">

【讨论】：

别忘了将 Font Awesome css 添加到您的索引中：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
如果通过npm安装，还需要包含cdn吗？
@Amituuush 通过 NPM“安装”FA（目前）并没有把它放在需要的地方。您必须始终确保将其复制到相应的 public 文件夹并手动添加具有正确 src 的样式表。
新的 CDN 链接：
这里是 react-fontawesome 的作者。您将需要以某种方式在应用程序中包含样式/字体，可以使用 CDN 版本，也可以使用 WebPack 之类的东西，或者只是链接到下载的版本。这个库的目标是不强迫你使用像 WebPack 这样的工具

【解决方案3】：

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

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

【讨论】：

这实际上是最能澄清最初问题的答案。
只想注意，使用 create-react-app 设置，您不需要在路径中包含 ../node_modules/... import 'font-awesome/css/font-awesome.min.css'; 有效： )
但是当我们添加像这样的图标时，它不会呈现。但是如果我们添加它就会渲染。为什么会这样？
@ThidasaParanavitharana 使用 <i className="far fa-heart"></i> 仅适用于 font-awesome v5。此解决方案安装 font-awesome v4
当我使用<i className="fa fa-heart-o"> </i> 时，fontawesome 4.7 中也没有任何显示。有谁知道为什么？

【解决方案4】：

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

 yarn add font-awesome

如果你没有 yarn 就按照 Praveen 说的做：

npm install --save font-awesome

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

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

【讨论】：

【解决方案5】：

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;

【讨论】：

您真的需要这个吗：@fortawesome/fontawesome-free-regular，因为您的示例中没有使用它。
@gabeno 嘿，不，这只是一个例子。这应该只是记住/告诉你你也可以使用另一个。但是谢谢提示，我应该添加评论。
太棒了！只需要修改这个import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon 不再是默认导出。

【解决方案6】：

我经历过这种情况；我需要应该在生产中完美运行的 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 效果很好！！！

【讨论】：

【解决方案7】：

结帐react icons 非常棒，效果很好。

【讨论】：

【解决方案8】：

你需要先安装包。

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'

【讨论】：

【解决方案9】：

Alexander 上面的回答真的帮了我很大的忙！

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

工作就像一个魅力。

【讨论】：

【解决方案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，文件名表示导入短语（很明显...），所以添加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/>

祝你好运！

【讨论】：

你为什么不提到你在 react 应用程序中放置 library.add(faStroopwafel) 的位置

【解决方案11】：

最简单的解决方案是：

安装：

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

【讨论】：

【解决方案12】：

在我的情况下，我正在关注 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

【讨论】：

对于第一个选项，您应该这样做：<FontAwesomeIcon icon={faCoffee} />

【解决方案13】：

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;

【讨论】：

这是我想要的确切答案。谢谢！

【解决方案14】：

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

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>

【讨论】：

【解决方案15】：

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>

【讨论】：

【解决方案16】：

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

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

&lt;link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet"&gt;

您现在可以以通常的方式使用 Font Awesome 图标：

&lt;i className="fas fa-globe-europe"&gt;&lt;/i&gt;

【讨论】：

【解决方案17】：

如果有人想通过官方文档进行操作。以下是我的做法和我的理解。

使用 npm 或 yarn 安装 font awesome 页面上提到的库，例如我通常使用这些

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

如果您想在通用或全局范围内使用，您需要两个来自“@fortawesome/fontawesome-svg-core”的导入库，它提供了对项目中各处图标的访问。

  import { library } from '@fortawesome/fontawesome-svg-core';

要使用图标，您需要根据已安装的 npm 或 yarn 库导入它们。我建议在 App.js 中导入它，这样可以很容易地看到它。就像如果我使用的是免费层购物车图标并且它是实心的，您可以像下面这样导入（如果您不确定它是实心的、常规的等还是什么库，只需单击图标，它就会列出不同的版本和根据您喜欢的图标，您可以导入库进行反应）。

  import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';

对于添加图标名称，我建议编写导入语句和库，然后在前面加上 fa 并开始键入它会在您键入后立即自动推荐的名称（在 VSCode 中检查），这将使它不那么复杂找到。

您需要在库中添加图标，以便在项目中全局访问，以逗号分隔

library.add( faCheckSquare, faAmbulance, faShoppingCart);

之后您可以导入以下组件

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

并在需要图标的任何地方使用它，如下所示。对于名称，它与 FontAwesome 网站上的样式类中列出的图标相同。 eg: 购物车被列为购物车

<FontAwesomeIcon icon="shopping-cart" />

在此之后它现在应该可以工作了。

【讨论】：