'How to add Font Awesome to Next.js project

I'm trying to add font-awesome to my Next.js project using webpack. I've tried following various instructions I've found on the web (using file-loader, url-loader), but nothing has worked for me. I gave up loading font-awesome with webpack for the moment, but I want to know how I can accomplish this. Currently, I have a .scss file that I use to load font-awesome.

It's contents:

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

And I'm manually moving the fonts from node_modules/font-awesome/fonts to static/fonts. This works perfectly, But I wanted to know if there's a webpack 2 way to do it in 2017.

Solution 1:^[1]

For anyone who'd like to see a real example with Next 9, check out https://github.com/UnlyEd/next-right-now

Interesting parts are:

Disclaimer: I'm a contributor to the project

Config: pages/_app.tsx

import { config, library } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { faAngleDown } from '@fortawesome/pro-solid-svg-icons';

// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
library.add(
  faGithub, faAngleDown
);

You can use solid/light/etc by importing the icon from the right repository

Usage: components/Nav.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon={['fab', 'github']} />

Edit Next.js 10:

While the above still works, what I recommend now for Next.js 10 and higher is to split your Font-Awesome related config into a different file, and import that file in _app.tsx. This makes the code more maintainable, that's all.

Something like:

Solution 2:^[2]

There are a few ways to do this. The first would be to create a head component via next/head and import there - see here:

Another way is to create a HOC to wrap your pages with and import there with a simple import 'font-awesome/css/font-awesome.min.css'

Or, you could just import it into one of your page's with the same kind of import. (I believe this will scope it to that particular page however. Double check me on that)

Hope this helps.

Solution 3:^[3]

See here for the official documentation of Integrating with other tools and frameworks.

You'll be able to do the following:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

config.autoAddCss = false;
library.add(fas, fab);

return ( 
  <FontAwesomeIcon icon={['fas', 'hat-wizard']} />
  <FontAwesomeIcon icon={['fab', 'github']} />
)

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAdobe } from '@fortawesome/free-brands-svg-icons/faAdobe';

return ( 
   <FontAwesomeIcon icon={faAdobe} />
)

Solution 4:^[4]

None of the solutions in this post are regarding how to use font-awesome via cdn, So, i am going to do just that.

There are multiple ways of doing it, but i normally use either _app.js or _document.js for such tasks.

Here is how it did it via _document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link
                        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
                        rel="stylesheet"
                        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
                        crossOrigin="anonymous"
                    />
                    <script src="https://kit.fontawesome.com/e20sdfsd9.js" crossOrigin="anonymous"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

Here i simply added a link to css cdn of fontawesome in the DOM of next app which will be added in the pages rendered in browser.

to know more about _document.js please refer here

A similart approach can be followed via _app.js which i am not using right now, but in case anybody needs it, fell free to drop a comment and i will do it for you.

Here is a brief intro to custom app or _app.js

Solution 5:^[5]

yarn add @fortawesome/fontawesome-free

in _app.js

import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

Solution 6:^[6]

There are 3 ways:

1: By Adding a FontAwesome Script to the `Head` Component

Create Head component, add script and render this component either in Header component or in Layout file where you use it in every page.

<Head>
  <script
    // you might need to get a newer version
    src="https://kit.fontawesome.com/fbadad80a0.js"
    crossOrigin="anonymous"
  ></script>
</Head>

2: Adding a link to the CDN within the `_document.js`.

It's possible to overwrite the root html file in Next.js by creating a _document.js under the pages folder. You could also add some other CDN as well. But, the easiest way is:

<Html>
  <Head>
    <link
      rel="stylesheet"
      type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </Head>
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

3: Install All the Necessary `npm` Packages for FontAwesome

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

And then at the top of the _app.js file add these lines:

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

Thereafter, you can import & use the rest of the FontAwesome icons as React Components like so:

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

<FontAwesomeIcon icon={faCheck} className="fas fa-check" style={{ color: "red" }}
></FontAwesomeIcon>

Solution 7:^[7]

Try this

const Hello = () => {

    return (
        <div>
            <Head>
                <title>New Title</title>
                <meta name="description" content="some description here" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
            </Head>

            <h1>Hello World <i class="far fa-laugh-beam"></i></h1>
        </div>
    )
}

export default Hello

Do install the below packages before proceeding

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	archae0pteryx
Solution 3
Solution 4	Hemant Malik
Solution 5
Solution 6	Jarmos
Solution 7

'How to add Font Awesome to Next.js project

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

1: By Adding a FontAwesome Script to the Head Component

2: Adding a link to the CDN within the _document.js.

3: Install All the Necessary npm Packages for FontAwesome

Solution 7:[7]