This is a quick guide about how to include font awesome 5 in react.
I will cover the following:
- How to install via cdn (content delivery network)
- How to install via a package manager
- How to include a font awesome icon in your project
Install Via CDN
Installing via cdn is easy and straightforward. You don’t have to store anything locally and your page might load faster if your user’s browser has a version of font awesome already cached.
First, navigate to your main html file. If you are using the create-react-app, the file is called “index.html”.
Next, include the following snippet between the head tags of your file.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
Your file should look something like:
Install With Package Manager
Sometimes installing via cdn does not fit your project’s requirements. For example, you might need to run or demo your application in an environment with poor or even no internet connectivity.
In such a case, you should install a local copy.
You can install font awesome 5 using npm or yarn. Depending on your package manager, execute one of the following commands in your terminal.
npm install --save-dev @fortawesome/fontawesome-free
yarn add --dev @fortawesome/fontawesome-free
After you have installed the package, head to the the javscript file where you render your app.
In create-react-app, this is file is called index.js.
Import the css file with the following line:
Your page should look something like this:
Use an Icon
OK, font awesome 5 should now be set up and ready to use in your project.
Open up the file containing your root component. This file is named app.js in the create-react-app.
First, we need to decide what icon we want to use.
A list of icons can be found on the font awesome website
I think the frog icon looks pretty cool — let’s render that.
Put the following code in your component:
<i class="fas fa-frog"></i>
Your component should look something like this:
Boot up your application, head to your url, and you will see:
Now that’s a good looking frog!
That’s it — now you have font awesome 5 set up and you can use it inside of your react project.
I hope you enjoyed this article. Perhaps you are also interested in learning some vue js. If so, please check out some of my vue js tutorials.
Have a great day!