Question

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

// HTML

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

//的script.js

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

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

Answer 1

使用节点pacakage manager（npm）将fontawesome安装为依赖

npm install --save react-fontawesome

确保将其与（其他依赖项）一起导入，在这种情况下它只是反应＆＃39;在文件顶部。在渲染功能中，您只需返回显示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

的更多详情

Answer 2

我不能发表评论，所以我会再写一个答案......

HTML

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

JS

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

React.render(<Application />, document.getElementById('app'));

如何添加图标Fontawesome做出反应？

2 个答案: