javascript - 如何在 React 中添加图标 Fontawesome？

Question

如何添加示例React 中的这个图标？

//HTML

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

//脚本.js

render: function() {
    return (
      React.createElement('span', {className: ''},
        React.createElement('i', {className:fa fa-address-book'})
 });

如何在 React 中添加图标 fa fa-address-book ？

Answer 1

使用节点包管理器 (npm) 安装 fontawesome 作为依赖项

npm install --save react-fontawesome

确保将它与(其他依赖项)一起导入，在这种情况下它只是在文件顶部“ react ”。在您的渲染函数中，您可以简单地返回显示 FontAwesome 标签的语句以显示所需的字体类。

react_fontawesome.js

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';

class ShowFonts extends Component {
    render() {
        return ( 
            <FontAwesome className = 'fa-address-book'
            name = 'address-book'
            size = '4x' / >
        );
    }
}
export default ShowFonts;

在您的主要 javaScript 文件 (index.js) 中，假设您的 react_fontawesome 在 components 文件夹中。

import ShowFonts from './components/react_fontawesome.js';

最后，您可以在项目中添加 fontawesome CSS Here是CDN。

注:如所述Here此组件不包含任何 Font Awesome CSS，因此您需要确保在您的终端包含它

您可以阅读有关 fontaswesome Here 的更多详细信息