Web

Use React with...

You can use the Font Awesome React component with Next.js or Typescript.

Advertisement

Next.js

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.

Oh no! The icon is huge!

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.

 
 
 





import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

It's also a good idea to check the Next.js documentation on creating a custom 'App' (opens new window). There's a chance that something has changed with that project and the export default ... part needs to change.

Next.js allows you to import CSS directly in .js files. It handles optimization and all the necessary Webpack configuration to make this work.

import '@fortawesome/fontawesome-svg-core/styles.css'

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

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'

export default function Home() {
  return (
    <div className="container">
      <main>
        <h1 className="title">
          <FontAwesomeIcon icon={faFaceRelieved} />
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>
    </div>
  )
}

All fixed!

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.

import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

Fixed in newer versions

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

Typings are included in this package. However, most types are defined in the underlying API library, @fortawesome/fontawesome-svg-core.

Suppose that in one module, you add all fas icons to the library:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

// ...

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:

import {
  IconLookup,
  IconDefinition,
  findIconDefinition
} from '@fortawesome/fontawesome-svg-core'

const coffeeLookup: IconLookup = { prefix: 'fa-solid', iconName: 'fa-coffee' }
const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

// ...

export class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={coffeeIconDefinition} />
        </h1>
      </div>
    )
  }
}

For Demo Purposes Only

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.