Clue Mediator

How to add Font Awesome 5 in React

📅December 30, 2021

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

Demo Application

Output - How to add Font Awesome 5 in React - Clue Mediator

Output - How to add Font Awesome 5 in React - Clue Mediator

Steps to add Font Awesome in React

  1. Install npm packages
  2. Two ways to use Font Awesome in component
  3. Output

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..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project