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

Based on font-awesome-webpack by Gowrav Shekar (@gowravshekar) and bootstrap-sass-loader by Shaka Code (@justin808.

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.4.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).

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

require("font-awesome-sass-loader");

You can configurate font-awesome-sass-loader with two configuration files:

• font-awesome-sass.config.js
• and set fontAwesomeCustomizations option

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

require("font-awesome-sass-loader!./path/to/font-awesome-sass.config.js");

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

module.exports = {
  entry: [
    "font-awesome-sass!./path/to/font-awesome.config.js",
    "your-existing-entry-point"
  ]
};

Example:

module.exports = {
  fontAwesomeCustomizations: "./_font-awesome.config.scss",

  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.

Example:

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

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

Example:

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

  styles: {
    ...
  }
};

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