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!
Follow us on Instagram
Top comments (0)