FontAwesome Icons not working properly in react/next app

Question

Solved - TLDR; Adding import '@fortawesome/fontawesome-svg-core/styles.css' to the _app.js / index.js file fixes the issue and FontAwesome works as intended. My issue was caused by npx-create-next-app including purgeCSS by default, which in turn stripped out the FontAwesome required styles.

---

I'm using FontAwesome in my Next app. I followed the React guide on the FA website and the icon SVG's are being output on the page. Problem is, none of the features work and they don't scale with font-size as they're meant to.

I don't want to hack it together by manually targeting the SVG's and adding size etc. as it's not ideal when it comes to responsiveness. i.e. it would be nice to have icons scale with accompanying text and the ability to add 'spinner', 'fixedWidth' etc.

Strangely, they have started working once or twice but then break again and I can't seem to reproduce.

// package.json
"dependencies": {
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
  }

// _app.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'
library.add( faHeart )

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={['far', 'heart']} spin />
    </header>
  )
}

// style.css
header {
 font-size: 20px; (does nothing to the icon)
}

svg {
 width: 20px; (works, but this shouldn't be required according to FA docs)
}

I've also tried individual use (importing icons into individual components, rather than utilising the library function) to the same effect. Like so:

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={faHeart} spin />
    </header>
  )
}

Answer 1

Fixed it. The issue was purgeCSS which was added to the project when using npx-create-next-app. purgeCSS was purging the required FontAwesome styles.

Explicitly importing the FontAwesome styles fixed the issue.

Specifically, I added import '@fortawesome/fontawesome-svg-core/styles.css' to _app.js.

Answer 2

I use FontAwesomeIcon in my React apps like this and it works:

import { faHeart} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

in the code:

<FontAwesomeIcon  className="icon" icon={faHeart} />
                        

and in css:

.icon{
color: ; / if you want to change color
font-size: 36px;
}

Answer 3

Essentially, all you need to do is:

import the icon:

import { yourIcon} from "@fortawesome/free-solid-svg-icons";

and use it:

<FontAwesomeIcon icon={yourIcon} />

You can add a classname to the icon and use that class to style it.

<FontAwesomeIcon icon={yourIcon} className="styled-icon" />

Here is a good video on adding font awesome icons to next.js: https://youtu.be/kaA2aX4X3NU

Answer 4

According to the doc, The react-fontawesome component integrates well with Next.js but there is one caveat you need to solve. Since Next.js manages CSS differently

In your project entry, probably App.js

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

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 elements into the of the page. Next.js blocks this from happening anyway so you might as well not even try.

config.autoAddCss = false