Can't load font-awesome with Webpack
Solution 1
To properly load font-awesome fonts, you need to configure loaders in your webpack.config.js to use url-loader and file-loader. Example:
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
]
}
};
to do this, you'll need to npm install font-awesome-sass-loader npm i font-awesome-sass-loader
You'll also need url-loader npm i url-loader
and file-loader npm i file-loader
Solution 2
This worked for me after trying many examples:
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
and for sure fontawsome need to be imported in your main file
import 'font-awesome/css/font-awesome.css';
also don't forget to install the loader
npm install url-loader --save-dev
Solution 3
Try loading your .eot
files with the file-loader
instead of url-loader
.
Example:
module: {
loaders: [
{
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
loaders: ['file']
}
]
}
Related videos on Youtube
Justin Smith
Updated on June 04, 2022Comments
-
Justin Smith almost 2 years
Trying to load font-awesome with webpack gives me this error:
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 Module parse failed: ...\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.
I'm trying to import font-awesome in a React component like this:
import "font-awesome/scss/font-awesome.scss";
Here's what my webpack.config.js looks like. I wanted to load font-awesome and related assets separately from everything else, namely because I'm already loading SVGs with babel, but didn't want to do that with font-awesome.
{ test: /\.scss/, loader: ExtractPlugin.extract("style", "css!sass") }, { test: /\.svg$/, loader: "babel!svg-react", exclude: /node_modules/ }, { test: /\.ttf$/, loader: "file-loader?mimetype=application/octet-stream&name=[name].[ext]", exclude: /node_modules/ }, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]", exclude: /node_modules/ }, { test: /\.(otf|eot|png|svg|ttf|woff|woff2)(\?[\s\S]+)?$/, loader: "url?limit=10000", include: "node_modules/font-awesome/fonts" }
I've tried doing the regex like this too and it didn't work:
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000" }
-
The Guy with The Hat over 6 yearsCan't you just do it in one line with
(ttf|eot|svg|woff2?)
?