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 website…


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

  1. Run the following command in the terminal: 
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
  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;
  1. 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.

Related Posts