Need help with font-awesome-webpack?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gowravshekar
198 Stars 47 Forks MIT License 27 Commits 11 Opened issues

Description

font-awesome package for webpack

Services available

!
?

Need anything else?

Contributors list

# 383,272
CSS
HTML
Shell
12 commits
# 58,926
Firebas...
reactjs
CSS
Shell
3 commits
# 348,642
HTML
Shell
elm
elm-lan...
2 commits
# 262,733
CSS
audio-a...
superco...
Shell
2 commits
# 19,229
TeX
reddit
bitcoin...
lightni...
1 commit
# 288,749
Android
firebas...
Shell
C++
1 commit

font-awesome-webpack

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

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

Usage

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:

require("font-awesome-webpack");

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:

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

Or simple add it as entry point to your

webpack.config.js
:
module.exports = {
  entry: [
    "font-awesome-webpack!./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.less

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;

extract-text-webpack-plugin

Configure style loader in

font-awesome.config.js
.

Example:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.