React Js Font Awesome Example;
Friends, throughout this guide, we will learn to how to implement Font Awesome Icons Library in Recat App. For this, we will use font-awesome package. In addition, we will learn to use font awesome from scratch in react.
With the help of font awesome, one can use the icons in react app in a friction-less way. It helps as a helping hand for modern websites. There is an exceptional icons library that contains social media logos. Font awesome offers for icons need and you caan create font awesome icon in react js.
If you are a neophyte and don’t know how to add and implement font awesome in react js, then simply follow the given steps for learning the same.
Add And Use Font Awesome In React JS
Step 1- Install React Project
Ideally, the very first towards implementing the font awesome icon is just to install a new react app by using create-react-app. For this, we run the given command on the terminal.
npx create-react-app react-font-awesome-example
Then, we have to move to the new app’s root.
cd react-font-awesome-example
Step 2- Add Bootstrap Package
Now, we head over to the console where we type the command for installing the Bootstrap CSS packages in react by pressing enter.
npm install bootstrap
Step 3- Add Font Awesome Package
Various packages of icons are being offered by font awesome with free and pro packages included.
We need multi npm packages for installing font awesome in react. So, we can use the below-given command for installing the icon libraries.
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
Now, we will import Bootstrap and Font Awesome packages in src/App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
function App() {
return (
<div>
<h2>React Js Font Awesome Example</h2>
</div>
);
}
export default App;
Step 4- Use Solid Font Awesome Icons
Further, we will learn to use solid font awesome icons in react. Firstly, we will create a react component file for which we have to create src/components folder. Then, we create the FontAwesomeIcons.Js file.
Afterward, we upload src/components/FontAwesomeIcons.Js file.
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAddressCard, faAirFreshener } from '@fortawesome/free-solid-svg-icons'
class FontAwesomeIcons extends React.Component {
render(){
return(
<div>
<h3><FontAwesomeIcon icon={faAddressCard} color="blue" /> Font Awesome Address Icon</h3>
<h3><FontAwesomeIcon icon={faAirFreshener} color="red" /> Font Awesome Solid Icon</h3>
</div>
)
}
}
export default FontAwesomeIcons;
Step 5- Font Awesome Loading Icons
As far as the user is concerned, loading spinners are of great use. It informs when the HTTP request or any other task is getting done in the background. The user gets informed about the ongoing processes.
Custom loading spinners are quite easy and simple in implementation by using the spin attribute in react. See the following code snippet.
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSpinner, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
class FontAwesomeIcons extends React.Component {
render(){
return(
<div>
<h3><FontAwesomeIcon icon={faSpinner} color="blue" spin/></h3>
<h3><FontAwesomeIcon icon={faCircleNotch} color="red" spin/></h3>
</div>
)
}
}
export default FontAwesomeIcons;
Step 6- Start React App
So, we see, how we have added amazing font awesome to react. Now, we reach the end of this guide where we will start the app.
npm start
Summary
Throughout this tutorial, we have learned how to add this wonderful Font Awesome in react js. We have also seen the use of Font Awesome 5 in react. In addition, we have seen the complete step by step addition and implementation of font awesome loading spinners in react js app.