How to include a Font Awesome icon in React's render()

If you are new to React JS and using create-react-app cli command to create the application, then run the following NPM command to include the latest version of font-awesome.

npm install --save font-awesome

import font-awesome to your index.js file. Just add below line to your index.js file

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

or

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

Don't forget to use className as attribute

 render: function() {    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;}

React uses the className attribute, like the DOM.

If you use the development build, and look at the console, there's a warning. You can see this on the jsfiddle.

Warning: Unknown DOM property class. Did you mean className?

https://github.com/FortAwesome/react-fontawesome

install fontawesome & react-fontawesome

$ npm i --save @fortawesome/fontawesome$ npm i --save @fortawesome/react-fontawesome$ npm i --save @fortawesome/fontawesome-free-solid$ npm i --save @fortawesome/fontawesome-free-regular$ npm i --save @fortawesome/fontawesome-svg-core

then in your component

import React, { Component } from 'react';import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'import './App.css';class App extends Component {  render() {    return (      <div className="App">        <h1>          <FontAwesomeIcon icon={faCoffee} />        </h1>      </div>    );  }}export default App;