How to add Font Awesome to Next.js 13 project error Module not found

Question

I would like to add fontawesome to my nextjs 13 project. I'm trying to implement solution #3 which was asked a long time ago. I've tried the solution in the fontawesome documentation as well. I'm just starting out with nextjs and at first I followed the documentation, but that produced a Module not found error. Then I tried to modify these solutions to work with the new changes in version 13. For reference my project is using the /src/app/pages.tsx file structure. I tried adding /src/app/_app.tsx with the following content:

import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false;
library.add(fas);

In my /src/app/page.tsx I added the import and tried to use fontawesome:

import Image from 'next/image'
import Link from "next/link";
import cardStyles from './styles/card.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <FontAwesomeIcon icon={['fab', 'linkedin']} />LinkedIn
    </main>
  )
}

and I keep getting the same error:

./src/app/page.tsx:4:0
Module not found: Can't resolve '@fortawesome/react-fontawesome'
  2 | import Link from "next/link";
  3 | import cardStyles from './styles/card.module.css'
> 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  5 | 
  6 | 
  7 | export default function Home() {

I do have the package in my package.json and installed in my node_modules:

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",

I even reinstalled it to be sure. I'm not sure how to troubleshoot this error. Could it be caused because the pages.tsx is being SSR instead of being done on client side?

Yilmaz · Accepted Answer · 2023-05-28T16:48:50.310

in RootLayout

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

then in Home page

import Image from "next/image";
import styles from "./page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faCheck}
        className="fas fa-check"
        style={{ color: "red", fontSize: 64 }}
      />
      Check
    </main>
  );
}

Proof of work:

Linkedin icon does not exist inside @fortawesome/free-solid-svg-icons. to use linkedin

npm i @fortawesome/free-brands-svg-icons

then in home page

import { faLinkedin } from "@fortawesome/free-brands-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faLinkedin}
        style={{ color: "blue", fontSize: 64 }}
      />
      Linkedin
    </main>
  );
}

I'm getting errors when I try to use className and style. I want a hamburger icon for navbar with size 32 (will have to use style for that as className doesn't do that) and I want className so to hide it on larger displays. But it works fine if I use class instead of className but the code editor tells me to use className. Here's the code (which works. For the one which doesn't just change class to className) ```ts ``` — Tushar Sharma, Jul 08 '23 at 17:37

score 0 · Answer 2 · answered May 28 '23 at 16:20

I faced with similar issues and endedup using ReactIcons.

ReactIcons consist of Font Awesome Icons along with other icons which can be really helpful. Kindly refer this and validate if these suit your needs. https://react-icons.github.io/react-icons/

score 0 · Answer 3 · answered May 28 '23 at 16:35

0

So I will recommend you to copy fontawesome kit and paste it in of your index.html, then you will be able to use all fontawesome icons.

answered May 28 '23 at 16:35

Chetan Panchal

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 28 '23 at 18:54

How to add Font Awesome to Next.js 13 project error Module not found

3 Answers3

Linked