How can I add icons Fontawesome in react?

Question

How can I add example this icon in 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'})
 });

How can I add icon fa fa-address-book in React ?

Answer 1

Using node pacakage manager (npm) install fontawesome as a dependency

npm install --save react-fontawesome

Make sure to import it along with (other dependencies) in this case it's just 'react' on top of the file . Inside your render function you can simply return the statement showing FontAwesome tag to display required font class.

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;

Inside your main javaScript file(index.js) assuming that your react_fontawesome is in components folder.

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

Finally you can add fontawesome CSS inside your project Here is the CDN.

Note: As described Here This component does not include any of the Font Awesome CSS , so you'll need to make sure to include it on your end

You can read more details about fontaswesome Here

Answer 2

I can't leave a comment, so I'll write one more answer...

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