How To Use Font Awesome 5 with React

How To Use Font Awesome 5 with React

Font awesome icons in react. This tutorial guide will explain to you in detail how to use font awesome icons in react js app.

If you want to use fontawesome icons in react js app. So, in this example tutorial will learn step by step on how to use font awesome icons in react js app.

How To Use Font Awesome 5 with React JS

Just follow the following steps and use font awesome in react js app:

  • Step 1 – Create React App
  • Step 2 – Install Font Awesome and Bootstrap 4
  • Step 3 – Create Component
  • Step 4 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Font Awesome and Bootstrap 4

In this step, execute the following command to install font awesome and boostrap 4 library into your react app:

npm install bootstrap --save

npm i --save @fortawesome/fontawesome-svg-core 

npm i --save @fortawesome/free-solid-svg-icons 

npm i --save @fortawesome/react-fontawesome

Add font awesome library and bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

function App() {
  return (
    <div>
      <h2>How To Use Font Awesome 5 with React</h2>
    </div>
  );
}

export default App;

Step 3 – Create Component

In this step, visit src directory of your react js app and create form component named FontAwe.js. And add the following code into it:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
  
class FontAwe extends Component {  

    render(){
        return(
            <div>
                <h4><FontAwesomeIcon icon={faCoffee} color="orange" /> This is Font Awesome Icon.</h4>
            </div>
        )
    }
    
}  
  
export default FontAwe;  

Step 4 – Add Component in App.js

In this step, you need to add FontAwe.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

function App() {  
    
  return (  
    <div className="App">  
      <FontAwe/>  
    </div>  
  );  
}  

export default App;

Conclusion

Font awesome icons in react. In this tutorial, you have learned how to use font awesome icons in react js app.

Recommended React JS Post

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *