How to add font awesome from node_modules directory using webpack

Question

I've installed font-awesome using npm install font-awesome --save-dev, and now Im having trouble including it on my project. Below are my code.

webpack.config.js

{
            test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
            loader: 'file-loader?name=assets/[name].[ext]',
}

app.scss

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

Error

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Module parse failed: /ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1) You may need an appropriate loader to handle this file type.

PenAndPapers · Accepted Answer · 2017-05-19 08:15:51Z

5

By reading doing some research I finally solved it by adding ([\?]?.*)$ on the regex part.

{
     test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
     loader: 'file-loader?name=assets/fonts/[name].[ext]',
}

answered May 19, 2017 at 8:15

PenAndPapers

2,1089 gold badges34 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JeffG · Accepted Answer · 2017-05-19 01:26:02Z

1

Have you installed the npm file-loader package?

npm install --save-dev file-loader

I have a webpack example repository in which I include font-awesome. It might help. You can find it here

answered May 19, 2017 at 1:26

JeffG

3,3421 gold badge29 silver badges34 bronze badges

1 Comment

PenAndPapers Over a year ago

yes I have installed file-loader but still dont work

İsmail Atkurt · Accepted Answer · 2021-03-14 13:48:51Z

0

with new webpack versions you may wanna try

{
    test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
    use: [
        {
            loader: 'file-loader?name=assets/fonts/[name].[ext]'
        }
    ]
}

answered Mar 14, 2021 at 13:48

İsmail Atkurt

1,4001 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to add font awesome from node_modules directory using webpack

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related