每当我尝试在 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 的 render() 中包含 Font Awesome 图标
IT技术
reactjs
font-awesome
2021-04-12 07:39:03
6个回答
如果您不熟悉 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 使用className属性，就像 DOM。
如果您使用开发版本，并查看控制台，则会出现警告。您可以在 jsfiddle 上看到这一点。
警告：未知的 DOM 属性类。你是说 className 吗？
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;
您还可以使用react-fontawesome图标库。这是链接：react-fontawesome
从 NPM 页面，只需通过 npm 安装：
npm install --save react-fontawesome
需要module：
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">
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;