How to add Font Awesome 5 in React
Today, we will show you how to add Font Awesome 5 in React. The 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
Steps to add Font Awesome in React
1. Install npm packages
First of all, we have to install the following npm packages to use Font Awesome 5 in the React application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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.
1 2 3 4 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faHeart, faThumbsUp } from '@fortawesome/free-solid-svg-icons' const FAIndividual = () => { return ( <div className="individual"> Follow <FontAwesomeIcon icon={faHeart} color="#fe251b" style={{ margin: '0 5px' }} /> <span className='cm-style'>Clue Mediator</span> <FontAwesomeIcon icon={faThumbsUp} size='2x' color='#3b5998' transform={{ rotate: -20 }} style={{ marginLeft: 5 }} /> </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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); |
Now, let’s refer to the icons by passing the string name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const FAGlobal = () => { return ( <div className="global"> Happy <FontAwesomeIcon icon={["far", "smile"]} color="green" style={{ margin: '0 5px' }} /> Coding..!! <FontAwesomeIcon icon="laptop-code" color="gray" style={{ marginLeft: 5 }} /> </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.
1 2 3 4 5 6 7 8 9 10 | // 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"]} /> |
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..!! 🙂
