# Loading FontAwesome with SCSS in NextJS

## Install Plugins

Install these two plugins:

- [next-fonts](https://github.com/rohanray/next-fonts)
- [next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)

## Edit Configuration File

```js
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](https://fontawesome.com/) 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:

```scss
@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.

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