Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
font-awesome-loader
Advanced tools
Font awesome configuration and loading package for webpack, using font-awesome (Sass).
See example usage at shakacode/bootstrap-loader in the examples.
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: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
loader: "url"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file'
},
]
}
};
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).
To use the complete font-awesome package including all styles with the default settings:
require("font-awesome-loader");
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.
You can configurate font-awesome-webpack with two configuration files:
font-awesome.config.js
font-awesome.config.scss
Add both files next to each other in your project. Then:
require("font-awesome-loader!./path/to/font-awesome.config.js");
Or simple add it as entry point to your webpack.config.js
:
module.exports = {
entry: [
"font-awesome-loader!./path/to/font-awesome.config.js",
"your-existing-entry-point"
]
};
font-awesome.config.js
Example:
module.exports = {
styles: {
"mixins": true,
"core": true,
"icons": true,
"larger": true,
"path": true,
}
};
font-awesome.config.scss
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.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.
FAQs
font-awesome package for webpack using sass
The npm package font-awesome-loader receives a total of 707 weekly downloads. As such, font-awesome-loader popularity was classified as not popular.
We found that font-awesome-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.