FontAwesome css classes missing? - reactjs

Question

I'm using a very similar Next.js project setup where the FontAwesome CSS classes are working, the only real difference is that this project is using Tailwindcss, where my previous project was with styled-components
This is my package.json
{
"name": "trpc-test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "rm -rf .next && prisma generate && next dev",
"build": "next build",
"start": "next start",
"postinstall": "yarn migrate:prod && prisma generate"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#next-auth/prisma-adapter": "^1.0.3",
"#prisma/client": "^4.1.0",
"#reduxjs/toolkit": "1.8.1",
"#svgr/webpack": "5.5.0",
"#trpc/client": "^9.26.2",
"#trpc/next": "^9.26.2",
"#trpc/react": "^9.26.2",
"#trpc/server": "^9.26.2",
"framer-motion": "^6.5.1",
"next": "12.2.1",
"next-auth": "^4.10.1",
"nodemailer": "^6.7.7",
"nprogress": "^0.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-query": "3.39.2",
"react-redux": "8.0.1",
"react-toastify": "8.0.3",
"redux": "4.2.0",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"superjson": "^1.9.1",
"zod": "^3.17.3"
},
"devDependencies": {
"#types/node": "18.0.0",
"#types/nprogress": "^0.2.0",
"#types/prettier": "^2.4.1",
"#types/react": "18.0.14",
"#types/react-dom": "18.0.5",
"#types/react-redux": "7.1.24",
"#types/react-toastify": "4.1.0",
"#typescript-eslint/eslint-plugin": "5.0.0",
"#typescript-eslint/parser": "5.0.0",
"autoprefixer": "^10.4.7",
"eslint": "8.1.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "12.2.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.14",
"prettier": "^2.4.1",
"prisma": "^4.1.0",
"tailwindcss": "^3.1.6",
"typescript": "4.3.5",
"vercel": "^27.2.0"
}
}
Then in a component, I'm just doing what I'd usually do
import React from "react";
import type { NextPage } from "next";
import { faTimes } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
const Home: NextPage = () => {
return (
<FontAwesomeIcon icon={faTimes} color="#fff" size="1x" />
);
};
export default Home;
The icon renders fine, it's the classes applied to the SVG, those closes don't seem to exist
like fa-1x which would usually apply font-size: 1em; to the element, is not being applied in my app.
I'm not sure if there is something specific I'm missing here?

Answer 1

You need to import the FontAwesome css styles in pages/_app.js
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} />
}
See https://fontawesome.com/v5/docs/web/use-with/react#getting-font-awesome-css-to-work for more info