如何在React的render（）中包含Font Awesome图标

每当我尝试在React的render（）中使用Font Awesome图标时，它就不会显示在生成的网页上，尽pipe它在普通的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使用className属性，如DOM。

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

警告：未知的DOM属性类。 你的意思是className？

Answer 2

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

 npm install --save font-awesome 

然后将下面的import语句添加到你的index.js文件中

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

要么

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

不要忘记使用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)' }} /> ); } });