Skip to content

Instantly share code, notes, and snippets.

@mehmetnyarar

mehmetnyarar/fontawesome-scss-in-nextjs.md

Created July 20, 2018 07:19
Show Gist options
  • Save mehmetnyarar/6739ed1b72245f2b8afcea4464636931 to your computer and use it in GitHub Desktop.
Save mehmetnyarar/6739ed1b72245f2b8afcea4464636931 to your computer and use it in GitHub Desktop.
Download ZIP
Loading FontAwesome with SCSS in NextJS
Raw
fontawesome-scss-in-nextjs.md

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";

@Vadorequest
Copy link

Alternative way that doesn't use SCSS: https://github.com/UnlyEd/next-right-now

Interesting parts are:

https://github.com/UnlyEd/next-right-now/blob/master/src/components/Nav.tsx#L234 (usage)
https://github.com/UnlyEd/next-right-now/blob/master/src/pages/_app.tsx#L39-L42 (config)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment