How do I use Font awesome Icon in React? - reactjs

Question

I want to use fontAwesome icons in ReactJs. I have not done this before. I want to do something like home Icons as well as Signout Icons in React.
Here is what I have done so far.
I included the font awesome Lib
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
Now I want to use in the application Like so
<td width="150px">
<p align="center"/>
<button className="btn"><i className='icon-home'></i></button>
</td>
<td width="135">
<p align="center"/>
<button className="btnSignout"><i className='fa fa-home'></i></button>
</td>
How do I use FontAwesome in React Application?

Answer 1

To use Font Awesome in the react project, you should have to -
install the following packages (run the following commands in the terminal)
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Now it's time to call and use into the JavaScript file.
import into the file the following 2 lines.
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faMugHot } from '#fortawesome/free-solid-svg-icons';
The format of using icon is as follow,
<FontAwesomeIcon icon={faIconName, faAnotherIconName} />
for Example: `<FontAwesomeIcon icon={faAnchor, faMugHot} />
Note: icon name will be camelcase fa<IconName>. for example, in the font-awesome website font name is fa-anchor we can write it as faAnchor. for long name of the icon, if the name is fa-mug-hot we have to write it as faMugHot.

Answer 2

To use font awesome icons in easy way into your React project use react-icon library which not only provides support for font awesome but as well as provides for Bootstrap icons , Heroicons and more.
Step 1. npm install react-icons --save
step 2. Import a icon like this -
import { FaBeer } from 'react-icons/fa';
Note: FaBeer is icon name here for more icons visit to react-icons
Step 3. Use it something like this -
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}

Answer 3

You can do this, check below code or click here for demo
Please double check the libraries I used and install
import React, { Component } from 'react';
import { render } from 'react-dom';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee, faBars } from '#fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor() {
super();
}
render() {
return (
<div>
<p>Please check this</p>
<button className="btn btn-primary">
<FontAwesomeIcon icon={faBars} size={'1x'} />
<span style={{ marginLeft: '10px' }}> My Button</span>
</button>
<br />
<br />
<FontAwesomeIcon icon={faCoffee} size={'2x'} />
</div>
);
}
}
render(<App />, document.getElementById('root'));