How to use Font awesome React

Font awesome react will help us to use font awesome icons in our React project. Font Awesome is an icon library containing a lot of free and pro icons. And React is a JavaScript front-end library. Using font awesome in React is easy and can be done by two methods.

• By installing npm package
• By including script in index file

Use Font awesome in React with npm package

Open terminal or cmd in your react project directory and install these packages by running the following command. These commands can also be found on FontAwesome website for React (https://fontawesome.com/how-to-use/on-the-web/using-with/react)

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

You can also use Yarn for the installation of these packages. Then run these commands for some more styling and icons styling.

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

Everything is set up now it’s time to use fontawesome in react in our project. Open the project and use some import these packages in your index.js or app.js, I will import these in my app.js file.

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fab);

Now its time to use icons

Always import FontAwesomeIcons before using it in react project with this line of code.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// Now see the general syntax of using font awesome icons in react
// <FontAwesomeIcon icon={["fab", "icons-class-name"]}  size="anysize" otherProperties/>
// Other properties like broder, spin inverse etc can be used with it


function App() {
  return (
    <div>
      <FontAwesomeIcon icon={["fab", "facebook-f"]} size="3x" border />
      <FontAwesomeIcon icon={["fab", "instagram"]} size="4x" spin />
    </div>
);}

Read about How to send email with JavaScript

Use font awesome in react to include in index file

The other method to use fontawesome icons the React is to include the font awesome script link in the index.html file

First, go to fontawesome.com create an account and get one script link from there as I got one

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

Then paste it in the head tag of public/index.html

Now you can simply copy the icon from frontawesome.com/ioncs and paste it into your project and it will work perfectly. As in the below example, I use this in my App.js file of react.

function App() {
  return (
    <div>
        <i class="fab fa-accessible-icon"></i>
        <i class="fas fa-adjust"></i>
        <i class="fas fa-spinner fa-pulse fa-5x"></i>
    </div>
);}

That was all about including icons in your react project hope this will help you, for further icons styling and animations visit fontawesome.com to get more idea and implement in your project.

Watch video if have any doubt