Question 177112 in Reactjs Question posted in
The new location for the React Documentation can be found here.

“How do I add Font Awesome to a Next.js 13 project when I get a ‘Module not found’ error?”

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?

Tags:

3

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    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>
  );
}

    enter image description here

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search