font-awesome-sass-loader
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).
Version 2!
The version 2 of font-awesome-sass-loader is only compatible with webpack v2. If you use the version 1 of webpack, please check the v1 branch.
Usage
To properly load font-awesome fonts, you need to configure loaders in your webpack.config.js
. Example:
moduleexports =module:rules:// the url-loader uses DataUrls.// the file-loader emits files.test: /\.woff??$/use:loader: 'url-loader'options:limit: 10000mimetype: 'application/font-woff'test: /\.?$/use: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).
Complete Font-Awesome
To use the complete font-awesome package including all styles with the default settings:
;
Custom configuration
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:
;
Or simple add it as entry point to your webpack.config.js
:
moduleexports =entry:"font-awesome-sass!./path/to/font-awesome.config.js""your-existing-entry-point";
font-awesome-sass.config.js
Example:
moduleexports =fontAwesomeCustomizations: "./_font-awesome.config.scss"styles:"mixins": true"path": true"core": true"larger": true"fixed-width": true"list": true"bordered-pulled": true"animated": true"rotated-flipped": true"stacked": true"icons": true"screen-reader": true;
_font-awesome.config.scss
Imported after Font-Awesome's default variables, but before anything else.
You may customize Font-Awesome here.
Example:
;;
extract-text-webpack-plugin
Configure extractStyles in font-awesome-sass.config.js
.
Example:
moduleexports =extractStyles: truestyles:...;
Install extract-text-webpack-plugin
before using this configuration.
Custom style loaders
Example:
moduleexports =styleLoaders: "style-loader" "css-loader" "sass-loader";