Loading FontAwesome with SCSS in NextJS

Install Plugins

Install these two plugins:

Edit Configuration File

const withSass = require("@zeit/next-sass");
const withFonts = require("next-fonts");

module.exports = withFonts(
  withSass({
    webpack(config, options) {
      // custom webpack loaders if you need
      return config;
    }
  })
);

Configure SCSS and FontAwesome

Download FontAwesome and extract the file
Copy webfonts directory under static folder and rename it to fonts
Create styles directory under the root folder
Copy scss directory to styles directory and rename it to fontawesome
Open _variables.scss under fontawesome directory and change $fa-font-path: "/static/fonts" !default;
Create styles.scss under styles folder and paste the following:

@import "./fontawesome/fontawesome";
@import "./fontawesome/fa-brands";
@import "./fontawesome/fa-regular";
@import "./fontawesome/fa-solid";

Add Custom Document

Create below _document.js under pages directory.

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

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

And Finally

Import SCSS to your Layout component or wherever you like that you want to use FontAwesome:

import "../styles/styles.scss";

daviddang91/fontawesome-scss-in-nextjs.md

Select an option

No results found