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