How to add Font Awesome to Next.js project

webpack font-awesome next.js webpack-2
Andres Zapata picture Andres Zapata · Jun 26, 2017 · Viewed 10k times · Source

I'm trying to add font-awesome to my Next.js project using webpack. I've tried following various instructions I've found on the web (using file-loader, url-loader), but nothing has worked for me. I gave up loading font-awesome with webpack for the moment, but I want to know how I can accomplish this. Currently, I have a .scss file that I use to load font-awesome.

It's contents:

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

And I'm manually moving the fonts from node_modules/font-awesome/fonts to static/fonts. This works perfectly, But I wanted to know if there's a webpack 2 way to do it in 2017.

Answer

archae0pteryx picture archae0pteryx · Jul 30, 2017

There are a few ways to do this. The first would be to create a head component via next/head and import there - see here:

Another way is to create a HOC to wrap your pages with and import there with a simple import 'font-awesome/css/font-awesome.min.css'

Or, you could just import it into one of your page's with the same kind of import. (I believe this will scope it to that particular page however. Double check me on that)

Hope this helps.

Related questions

How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

I have font-awesome in my node_modules folder so I try to import it in my main .scss file like so: @import "../../node_modules/font-awesome/scss/font-awesome.scss"; But Webpack bundling compilation fails, telling me Error: Cannot resolve 'file' or …

Read More
How to make Font awesome 5 work with webpack

I'm trying to use Fontawesome in my Flask/webpack project. The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely. What I have: package config: "devDependencies": { ... "css-loader": "^1.0.0", "…

Read More
Font Awesome 5 Bundle via NPM

I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM. I've added all required packages from the documentation: yarn add -D @fortawesome/fontawesome yarn add -D @fortawesome/fontawesome-pro-solid yarn add …

Read More