The react-fontawesome component integrates well with Next.js but there is one caveat you need to solve.
Since Next.js manages CSS differently than most web projects if you just follow
the plain vanilla documentation to integrate react-fontawesome into your
project you'll see huge icons because they are missing the accompanying CSS
that makes them behave.
Getting Font Awesome CSS to Work
Let's assume that you have a standard install and that pages is in the root.
To do this you'll start by creating a pages/_app.js. If you already have one,
you can modify it so that it includes the extra bits you need.
You change this configuration value to false so that the Font Awesome core SVG library
will not try and insert <style> elements into the <head> of the page. Next.js blocks
this from happening anyway so you might as well not even try.
config.autoAddCss =false
Using the Icons in Pages
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Now you can use an icon in a page like pages/index.js:
import Head from'next/head'import{ FontAwesomeIcon }from'@fortawesome/react-fontawesome'import{ faFaceRelieved }from'@fortawesome/pro-solid-svg-icons'exportdefaultfunctionHome(){return(<divclassName="container"><main><h1className="title"><FontAwesomeIconicon={faFaceRelieved}/>
Welcome to <ahref="https://nextjs.org">Next.js!</a></h1></main></div>)}
Troubleshooting with Next.js
Failed to Import ./styles.css
Module not found: Package path ./styles.css is not exported from package`
Newer versions of Next.js may give you this error. A workaround is to change the way
the styles are imported.
We've fixed this issue in newer version of @fortawesome/fontawesome-svg-core. You might be able
to simply upgrade to fix this instead of modifying your import.
Duotone Icons Aren't Working
If you attempt to use our duotone icons and they look more like our solid
icons, it probably means that the CSS for Font Awesome has not been installed.
Along with properly sizing icons, the CSS for Font Awesome is also responsible
for setting the opacity for the secondary layer which is how these icons work.
TypeScript
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Then suppose that in another module, you have some code that looks up one of the icons in the library. The import statement below imports two types and one function:
You wouldn't normally declare intermediate objects like coffeeLookup just to look up an icon. So this is cumbersome and needlessly verbose for such a simple example. The purpose here is just to show how you might import type definitions and use them in declarations when it does make sense to do so.
Several types, including IconLookup and IconDefinition, appearing above, actually originate from the @fortawesome/fontawesome-common-types package. They are re-exported from both @fortawesome/fontawesome-svg-core and @fortawesome/free-solid-svg-icons (and other icon packs). This is just to make importing more convenient in some cases. Refer to the index.d.ts in any module to see which types it exports.
I need to use Font Awesome and React with...
Is there another tool or framework you want to use with React and Font Awesome? Give us a shout and we'll look into adding it.