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