font-awesome (sass) package for webpack
npm install font-awesome-sass-loaderfont-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:
`` javascript`
module.exports = {
module: {
rules: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
}
]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
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).
To use the complete font-awesome package including all styles with the default settings:
` javascript`
require("font-awesome-sass-loader");
You can configurate font-awesome-sass-loader with two configuration files:
* font-awesome-sass.config.js
* and set option
Add both files next to each other in your project. Then:
` javascript`
require("font-awesome-sass-loader!./path/to/font-awesome-sass.config.js");
Or simple add it as entry point to your webpack.config.js:
` javascript`
module.exports = {
entry: [
"font-awesome-sass!./path/to/font-awesome.config.js",
"your-existing-entry-point"
]
};
#### font-awesome-sass.config.js
Example:
` javascript
module.exports = {
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,
}
};
`
Imported after Font-Awesome's default variables, but before anything else.
You may customize Font-Awesome here.
Example:
` scss`
$fa-inverse: #eee;
$fa-border-color: #ddd;
Configure extractStyles in font-awesome-sass.config.js.
Example:
` javascript
module.exports = {
extractStyles: true,
styles: {
...
}
};
`
Install extract-text-webpack-plugin before using this configuration.
Example:
` javascript``
module.exports = {
styleLoaders: ["style-loader", "css-loader", "sass-loader"],
};