How To Use Font Awesome 5 in React

Font awesome icons in react apps example. In this tutorial i will guide to you in detail how to use font awesome icons in react js app.

Like you are designing a website using ReactJS. And you want to add the contact’s icon like email icon, phone icon etc. in that website’s contact us page, footer menu or header menu. So for this you have to install Font awesome library in your react app.

Font Awesome. Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit. Font Awesome is the most popular way to add font icons to your website. Font Awesome icons are created using scalable vectors, so you can use high quality icons that work well on any screen size

If you want to use font awesome 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 in React Apps

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

Step 1 – Create React App

Open your command prompt 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

Execute the following command on command prompt 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 FontAwesome Component

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 – Import FontAwesome Component in App.js

Import font awesome component in app.js file, So visit src/App.js file and import it:

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 Tutorials