font-awesome package for webpack
Switch branches/tags
Clone or download
wolfadex 0.0.5-beta.2
Attempting to get onto npm without access to npm.
Latest commit 319bb47 Feb 21, 2017


Font awesome configuration and loading package for webpack, using font-awesome (Less).

Based on bootstrap-webpack by Scott Bleck (@bline).


To properly load font-awesome fonts, you need to configure loaders in your webpack.config.js. 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" }

Font awesome font urls are of the format [dot][extension]?=[version-number], for example .woff?v=4.2.0

The Regex for font types are adjusted to support these formats. Regex also support urls ending with .woff, .ttf, .eot and .svg (Used by Bootstrap).

Complete Font-Awesome

To use the complete font-awesome package including all styles with the default settings:


The require statement should be present in your application code(Entry file or any other file required in entry file) and not in webpack.config.js.

Custom configuration

You can configurate font-awesome-webpack with two configuration files:

  • font-awesome.config.js
  • font-awesome.config.less

Add both files next to each other in your project. Then:


Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [



module.exports = {
  styles: {
    "mixins": true,

    "core": true,
    "icons": true,

    "larger": true,
    "path": true,


Imported after Font-Awesome's default variables, but before anything else.

You may customize Font-Awesome here.


@fa-inverse: #eee;
@fa-border-color: #ddd;


Configure style loader in font-awesome.config.js.


module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  styles: {

Install extract-text-webpack-plugin before using this configuration.