How to use FontAwesome in Next.js?

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hardique Dasore

Before we jump to the steps to add FontAwesome to Next.js screens, let's first know what FontAwesome is.

FontAwesome is an icon library and toolkit that provides a range of free solid, social and outline icons. It comes in handy when building websites for personal use.
It has a list of scalable vectors that are highly customizable.

Adding Font Awesome to Next.js

Run the following command in the terminal:

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

Create and edit _app.js file
Add the following piece of code in the file:

import "@fortawesome/fontawesome-svg-core/styles.css"
import { config } from "@fortawesome/fontawesome-svg-core"; 
config.autoAddCss = false;

Now you can directly import the icons you want to use in your component and use them.

Happy Coding!

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hardique Dasore

Print Share Comment Cite Upload Translate Updates

APA

Hardique Dasore | Sciencx (2022-11-10T21:05:07+00:00) How to use FontAwesome in Next.js?. Retrieved from https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/

MLA

" » How to use FontAwesome in Next.js?." Hardique Dasore | Sciencx - Thursday November 10, 2022, https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/

HARVARD

Hardique Dasore | Sciencx Thursday November 10, 2022 » How to use FontAwesome in Next.js?., viewed ,<https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/>

VANCOUVER

Hardique Dasore | Sciencx - » How to use FontAwesome in Next.js?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/

CHICAGO

" » How to use FontAwesome in Next.js?." Hardique Dasore | Sciencx - Accessed . https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/

IEEE

" » How to use FontAwesome in Next.js?." Hardique Dasore | Sciencx [Online]. Available: https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/. [Accessed: ]

rf:citation

» How to use FontAwesome in Next.js? | Hardique Dasore | Sciencx | https://www.scien.cx/2022/11/10/how-to-use-fontawesome-in-next-js/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Adding Font Awesome to Next.js

Related Posts