如何添加圖標Fontawesome做出反應？

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

確保將其與（其他依賴項）一起導入，在這種情況下，它只是在文件頂部“反應”。 在渲染功能中，您只需返回顯示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 這是CDN。

注：如上所述這里此組件不包括任何字體真棒CSS的，所以你需要確保包括它在您結束

你可以在這里閱讀有關fontaswesome的更多細節

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'));