如何在 React 渲染()中包含一个 Font Awesome 图标

无论何时我尝试在 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/

错在哪里？

302210 次浏览
小开
最佳答案

React 使用 className属性，如 DOM。

如果您使用开发构建，并查看控制台，就会看到一个警告。你可以在 jsfiddle 上看到这个。

警告: 未知 DOM 属性类。您指的是 className 吗？

小开

你也可以使用 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.html 中添加字体很棒的 CSS:

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

小开

如果您是 新的反应 JS并且使用 创建-反应-应用程序命令来创建应用程序，那么运行以下 NPM 命令来包含 font-Awesome 的最新版本。

npm install --save font-awesome

在 index.js 文件中导入 font-Awesome，只需在 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>;
}
小开

正如“ Praveen MP”所说，你可以安装字体-可怕作为一个包。如果你有纱线，你可以运行:

 yarn add font-awesome

如果你没有毛线，就按 Praveen 说的做:

npm install --save font-awesome

这将把包添加到项目依赖项中，并将包安装在 node _ module 文件夹中。在 App.js 文件添加中

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

Https://github.com/fortawesome/react-fontawesome

安装 fontawes& response-fontawes.fontawes.fontawes.fontawes.fontawes.fontawes.fontawes.fontawes.net

$ 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;
小开

我经历过这种情况; 我需要反应/还原站点，它应该在生产中完美工作。

但是有一个“严格模式”; 不应该与这些命令共进午餐。

yarn global add serve
serve -s build

只需单击 build/index.html 文件即可工作。 当我在 npm font-Awesome 中使用 fontawest 时，它在开发模式下工作，但不在“严格模式”下工作。

我的解决办法是:

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

在以上所有步骤之后，这个字体棒极了! ! ！

小开

检查 反应图标非常酷，工作良好。

小开

您需要先安装软件包。

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'
小开

亚历山大从天而降的回答真的帮了我大忙！

我试图把社交账号图标放在我用 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>

非常有效。

小开

经过一段时间的努力，我想出了这个程序(基于 Font Awesome 的文档 给你) :

如上所述，你必须安装 太棒了，反应很好和 图标库:

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 和。文件名表示导入短语(非常明显...) ，因此添加 愤怒、 宝石和 打勾图标如下:

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内部查找‘ 图标名称’变量:

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

反应代码应该是这样的:

<FontAwesomeIcon icon=check-circle/>

祝你好运！

小开

最简单的解决办法是:

安装:

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

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

这就是我所做的:

App.js 文件

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

组件文件

<FontAwesomeIcon icon={"coffee"} />

但我得到了这个错误

enter image description here 然后我在传递图标道具时添加了别名，比如:

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

它正在工作，您可以在 icon.js 文件中找到前缀值，在我的例子中是: faCoffee.js

小开 
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 的情况下加入字体库的话，把这个放在 React 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>
小开

就我个人而言，我发现 response-fontawest 很笨拙，因为它要求每个图标都单独导入。如果你想使用 Font Awesome 版本5的 React 而不使用 response-fontawsome，你可以这样做:

  • 下载 fontawest 免费软件包: < a href = “ https://fontawesome.com/how-to-use/on-the-web/setup/host-font-Awesome-yourself”rel = “ nofollow norefrer”> https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

  • 在你的应用程序的“公共”目录中创建一个名为“ fontawely”的目录。

  • 将下载的 zip 中的“ css”和“ webfonts”目录复制到此文件夹中。

  • 将以下代码添加到“ index.html”文件的“ head”标记中:

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

You can now use Font Awesome icons in the usual way:

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

小开

如果有人想通过官方文件做到这一点。

  1. 使用 npm 或纱线安装字体酷炫页面上提到的库，例如，我通常使用这些
  npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
  1. 如果您想在一般情况下或全局情况下使用，需要从“@fortawely/fontawely-svg-core”导入两个库，它提供了对项目中任何地方的图标的访问。
  import { library } from '@fortawesome/fontawesome-svg-core';
  1. 要使用这些图标，您需要根据已安装的 npm 或纱线库导入它们。我建议把它导入到 App.js 中，这样就很容易看到它了。比如，如果我使用一个免费的购物车图标，它是坚实的，你可以像下面这样导入(如果你不确定它是坚实的，常规的，等等，或什么库，只需点击图标，它会列出不同的版本，基于图标你喜欢你可以导入库的反应)。
  import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';
  • 为了添加图标名，我建议编写 import 语句和库，然后在 fa之前输入它将自动推荐的名称(在 VSCode 中检查) ，这将减少查找的复杂性。
  1. 您需要在库中添加图标，以便在以逗号分隔的项目中全局访问它
library.add( faCheckSquare, faAmbulance, faShoppingCart);
  1. 之后，可以导入以下组件
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

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

<FontAwesomeIcon icon="shopping-cart" />

现在应该可以了。


提交答案