Hello friends, in this tutorial, we will learn about how to install the font awesome icons library in react application. Moreover, we will also see how we can use font awesome icons in react.
Font Awesome is the best font and icons toolkit library that provide us a huge amount of various icons. It provides social media icons, SVG icons, solid icons, animation icons, clipart, etc or you can say every type of icon.
It gives you modern attractive icons for your website. This Font Awesome icons library has 68 categories of icons and a total of 16083 pro icons with 2009 free icons.
Let’s head over to install the font awesome icons library and use them in react application. But if you want to do it from scratch then you can check this tutorial on how to install react application?
Install Font Awesome Icons Library in React
As I said above Font Awesome gives us free and pro icons, so based on these cases it has various packages of icons that we can use.
To use the Font Awesome icons library in react we have to install multiple packages to implement the different types of icons.
To install the Font Awesome icons library in react use the following command in your terminal. It will install the base packages.
To install the font awesome regular icons – free and pro:
To install the font awesome solid icons – free and pro:
To install the font awesome brand icons – free:
To install the font awesome light icons – pro:
To install the font awesome duotone icons – pro:
All the above commands will use to install the Font Awesome different packages. You can install it as per your requirements.
Use Font Awesome Icons Library in React
Now we will see how we can use the Font Awesome icons in our react application. We will make a small react application for demo purposes.
There are two ways to use the Font Awesome icons in react components. We will use both methods in this tutorial, the first is a global method and the second is the individual usage method.
Global Method Creating Icon Library
In this global method, we will create a separate Font Awesome library file (FontAwesomeLibrary.js) in react project and then import it in the App.js file or wherever you want to you in the components.
If you want to create an icons library by importing individual icons from different packages then you can do like following.
The above code will import the icons from different packages and then create a Font Awesome library using the library() method.
If you want now import the entire project at once, instead of importing individual icons then you can do this by following the code example.
If you have successfully created the icons library and imported it into desired components then we are ready to use the Font Awesome icons in react.
Using Font Awesome icons in react
Now we can simply use the Font Awesome icons to style react application. You just need to import that icons library that we have made above and the
FontAwesomeIcon component from react-fontawesome.
Individually Method to Use the Icons
In this method, we will see the example of using the individual method to import the icons in react components.
If you don’t want to import the entire package of icons, you can simply add the individual icons to each component. You just need to import icons where you want to use them.
Font Awesome Icons Customization in React
So in the above examples, we see how we can install the Font Awesome library in react and how to use them in different ways.
Now we will see some style customization for Font Awesome icons. We can style the icons with passing additional attributes or props in the FontAwesomeIcon component.
We can increase the size of icons using the abbreviations sm, md, lg, and xl. We can also use the number up to 6 for increasing the size of the icons like 2x, 3x, 4x, 5x, and 6x.
You can also make the colorful icons using the color props and you can also use the inline style property to give the style for icons.
Let’s see some customization of Font Awesome React Icons.
Font Awesome Icons Size
To increase the font awesome icon
size use the sm, md, lg, and xl abbreviation or numbered like 2x up to 6x. See the following example.
Font Awesome Icons Color
To change the color of icons use the
color props or inline react style property to add the CSS style to icons. See the example below.
Font Awesome Icons Transform
transform property of font awesome icons, you can position icons randomly. You can scale, flip, and move icons using this property. See the following example code.
Font Awesome Icons Fix Width
You can use the
fixWidth props to set the same width and uniform as others. Let’s say you want the same width icons for the navigation menu, so add fixWidth props to icons simply.
Font Awesome Icons Animate
To animate the Font Awesome icons, you can use the animation props to animate your icons. Some animation props are Beat, Fade, Bounce, Flip, Shake, Spin, etc.
There are more features to style the Font Awesome icons, you can get the idea from font awesome style guide.
Bouns Point: Same Icons, Different Styles
If you want to import the same icons from different packages, you can import them by giving names as an alias. See the following code.
So in this tutorial, you learned how to install Font Awesome Icons in React. You also see how to use Font Awesome icons in two different ways using the global method and individual importing method.
We also see some customization examples of Font Awesome icons to change the icon’s size, color, position, etc. Hope you like it.