How To Add And Use Font Awesome 5 In React App

React Js Font Awesome Example;

Friends, throughout this guide, we will learn to how to implement Font Awesome Icons Library in Recat App. For this, we will use font-awesome package. In addition, we will learn to use font awesome from scratch in react.

With the help of font awesome, one can use the icons in react app in a friction-less way. It helps as a helping hand for modern websites. There is an exceptional icons library that contains social media logos. Font awesome offers for icons need and you caan create font awesome icon in react js.

If you are a neophyte and don’t know how to add and implement font awesome in react js, then simply follow the given steps for learning the same.

 

Add And Use Font Awesome In React JS

Step 1- Install React Project

Ideally, the very first towards implementing the font awesome icon is just to install a new react app by using create-react-app. For this, we run the given command on the terminal.

npx create-react-app react-font-awesome-example

 

Then, we have to move to the new app’s root.

cd react-font-awesome-example

 

Step 2- Add Bootstrap Package

Now, we head over to the console where we type the command for installing the Bootstrap CSS packages in react by pressing enter. 

npm install bootstrap

 

Step 3- Add Font Awesome Package

Various packages of icons are being offered by font awesome with free and pro packages included.

We need multi npm packages for installing font awesome in react. So, we can use the below-given command for installing the icon libraries.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

 

Now, we will import Bootstrap and Font Awesome packages in src/App.js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

 
function App() {
  return (
    <div>
      <h2>React Js Font Awesome Example</h2>
    </div>
  );
}
 
export default App;

 

Step 4- Use Solid Font Awesome Icons

Further, we will learn to use solid font awesome icons in react. Firstly, we will create a react component file for which we have to create src/components folder. Then, we create the FontAwesomeIcons.Js file.

Afterward, we upload src/components/FontAwesomeIcons.Js file.

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAddressCard, faAirFreshener } from '@fortawesome/free-solid-svg-icons'

class FontAwesomeIcons extends React.Component {  
 
    render(){
        return(
            <div>
                <h3><FontAwesomeIcon icon={faAddressCard} color="blue" /> Font Awesome Address Icon</h3>
                
                <h3><FontAwesomeIcon icon={faAirFreshener} color="red" /> Font Awesome Solid Icon</h3>
            </div>
        )
    }
     
}  
   
export default FontAwesomeIcons;

 

Step 5- Font Awesome Loading Icons

As far as the user is concerned, loading spinners are of great use. It informs when the HTTP request or any other task is getting done in the background. The user gets informed about the ongoing processes.

Custom loading spinners are quite easy and simple in implementation by using the spin attribute in react. See the following code snippet.

import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSpinner, faCircleNotch } from '@fortawesome/free-solid-svg-icons'

class FontAwesomeIcons extends React.Component {  
 
    render(){
        return(
            <div>
                <h3><FontAwesomeIcon icon={faSpinner} color="blue" spin/></h3>
                
                <h3><FontAwesomeIcon icon={faCircleNotch} color="red" spin/></h3>
            </div>
        )
    }
     
}  
   
export default FontAwesomeIcons;

 

Step 6- Start React App

So, we see, how we have added amazing font awesome to react. Now, we reach the end of this guide where we will start the app.

npm start

 

Summary

Throughout this tutorial, we have learned how to add this wonderful Font Awesome in react js. We have also seen the use of Font Awesome 5 in react. In addition, we have seen the complete step by step addition and implementation of font awesome loading spinners in react js app.