Skip to content

Instantly share code, notes, and snippets.

@Miravicson

Miravicson/fontawesome-scss-in-nextjs.md

Forked from mehmetnyarar/fontawesome-scss-in-nextjs.md
Created December 31, 2019 07:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Miravicson/32b49999ac7af67cadf00e555a27231d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Miravicson/32b49999ac7af67cadf00e555a27231d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mehmetnyarar mehmetnyarar created this gist Jul 20, 2018.
    70 changes: 70 additions & 0 deletions fontawesome-scss-in-nextjs.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    # 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";`