How to add Font Awesome 5 in React
Today, we will show you how to add Font Awesome 5 in React. The icons" title="Font Awesome 5">Font Awesome 5 is the largest icon library based on CSS and Less. Here we will explain to you how to add Font Awesome 5 in React application and how to use it in a component.
Checkout more articles on ReactJS
- react-select-dropdown" title="How to add an icon in the react-select dropdown">How to add an icon in the react-select dropdown
- Handle drag over and out in React
- barcode-scanner-in-react" title="Barcode scanner in React">Barcode scanner in React
- api-in-react-ag-grid" title="Load data from the API in React AG Grid">Load data from the API in React AG Grid
Demo Application
Output - How to add Font Awesome 5 in React - Clue Mediator
Steps to add Font Awesome in React
1. Install npm packages
First of all, we have to install the following npm packages to use Font Awesome 5 in the React application.
// JSX element to render the icons
npm install @fortawesome/react-fontawesome
// To import icons globally
npm install @fortawesome/fontawesome-svg-core
// To render free solid icons
npm install @fortawesome/free-solid-svg-icons
// To render free regular icons
npm install @fortawesome/free-regular-svg-icons
// To render free brands icons
npm install @fortawesome/free-brands-svg-icons
If you have Font Awesome Pro Plan then you can also use the following packages.
npm install @fortawesome/pro-solid-svg-icons
npm install @fortawesome/pro-regular-svg-icons
npm install @fortawesome/pro-light-svg-icons
npm install @fortawesome/pro-duotone-svg-icons
2. Two ways to use Font Awesome in component
We have two different ways to use the Font Awesome icons in the React application.
- Individual use
- Global use
Individual use:
In this method, we need to explicitly import icons into each component. In the following example we have rendered the `heart` & `thumbs up` icons along with the content in the component.
FAIndividual.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart, faThumbsUp } from '@fortawesome/free-solid-svg-icons'
const FAIndividual = () => {
return (
<div class="individual">
Follow
<fontawesomeicon icon={faHeart} color="#fe251b" style={{ margin: '0 5px' }}>
<span class="cm-style">Clue Mediator</span>
<fontawesomeicon 5="" icon={faThumbsUp} size="2x" color="#3b5998" transform={{ rotate: -20 }}>
</fontawesomeicon></fontawesomeicon></div>
);
}
export default FAIndividual;
Global use:
In the second method, we have to globally import the icons in the entry points (somewhere in `index.js` or `App.js`). Once you import it at the entry level then no need to import them into each component.
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faLaptopCode } from '@fortawesome/free-solid-svg-icons';
import { faSmile } from '@fortawesome/free-regular-svg-icons';
library.add(faSmile, faLaptopCode);
ReactDOM.render(
<react class="strictmode">
<app>
</app></react>,
document.getElementById('root')
);
Now, let’s refer to the icons by passing the string name.
FAGlobal.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const FAGlobal = () => {
return (
<div class="global">
Happy
<fontawesomeicon icon="{["far"," "smile"]}="" color="green" style={{ margin: '0 5px' }}>
Coding..!!
<fontawesomeicon 5="" icon="laptop-code" color="gray" style={{ marginleft: }}>
</fontawesomeicon></fontawesomeicon></div>
);
}
export default FAGlobal;
The default icon style is solid so we don’t need to add the prefix. That’s why we just passed the `laptop-code` in the above code.
Here are a few more examples to render the icons from the different packages.
// Light:
<fontawesomeicon icon="{["fal"," "coffee"]}="">
// Regular:
<fontawesomeicon icon="{["far"," "coffee"]}="">
// Solid
<fontawesomeicon icon="{["fas"," "coffee"]}="">
// ...or, omit as FontAwesome defaults to solid, so no need to prefix:
<fontawesomeicon icon="coffee">
// Brand:
<fontawesomeicon icon="{["fab"," "github"]}="">
</fontawesomeicon></fontawesomeicon></fontawesomeicon></fontawesomeicon></fontawesomeicon>
Refer to this link for more features of the Font Awesome icon.
3. Output
Let’s put all the code together and see how it looks in the React application.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂