Using Fontawesome with Nextjs
Using icons is common for building UI in web development. While my favorite icon library heroicons has a bunch of easy to use svg icons, Font Awesome free version provides loads more icons as a supplement. I am heavily using nextjs to build my frontend projects recently, unlike react or vue projects that have an
index.html file we can import fontawesome as a stylesheet from cndjs. Nextjs doesn’t have a root template html file.
According their official doc about how to use fontawesome with react, we can follow the same way to use it in nextjs. But I prefer to import fontawesome as CSS-import as fontawesome under the hood is a CSS toolkit.
We need first install fontawesome into our project via yarn (or npm):
For older nextjs projects, the
_app.js file may not exist. We can manually create one under the
Now we can use
i tag inside any JSX components and specify icon inside className.
output will look like this:
What makes this even better is that we can seamlessly apply other CSS styles with those icons. For example, if I’d like to change colors of those icons with tailwind CSS:
We can easily get 3 icons with different colors: