DEV Community

Cover image for How to use FontAwesome in Next.js?
Hardique Dasore
Hardique Dasore

Posted on • Edited on

How to use FontAwesome in Next.js?

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

  1. Run the following command in the terminal:
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
Enter fullscreen mode Exit fullscreen mode
  1. Create and edit _app.js file
  2. 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;
Enter fullscreen mode Exit fullscreen mode
  1. Now you can directly import the icons you want to use in your component and use them.

Happy Coding!

Follow us on Instagram

Image description

Top comments (0)