Registry / devops / font-awesome-webpack

font-awesome-webpack

library0.0.5-beta.2jsnpmunverified

A Webpack loader package that integrates Font Awesome (Less-based) into webpack builds. Version 0.0.5-beta.2 is the latest, with infrequent releases. It simplifies loading Font Awesome fonts and styles by providing a preconfigured webpack loader and customizable Less configuration. Key differentiators vs raw font-awesome: automatic font loader regex, optional extract-text-webpack-plugin support, and selective style inclusion. Suitable for Webpack 1.x and 2.x projects, but unmaintained after 2017.

devops

npm install font-awesome-webpack

github ↗package ↗

INSTALL

IMPORT

SIG · FONT-AWESOME-WEBPA

font-awesome-webpack

devopsjavascriptv0.0.5-beta.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default import (complete)

✓ import 'font-awesome-webpack';

✗ const fa = require('font-awesome-webpack');

ESM import loads all styles; CommonJS require also works but typically used for side effects only.

custom config import

✓ import 'font-awesome-webpack!./font-awesome.config.js';

✗ require('font-awesome-webpack!./font-awesome.config.js');

Use inline loader syntax with webpack. Config file must be .js; optional .less file alongside.

require in entry

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

CommonJS require is typical in webpack entry config; works in both ESM and CJS.

Sets up webpack loaders, imports all Font Awesome styles, and shows optional custom configuration with selective styles.

// webpack.config.js (Webpack 1.x syntax) module.exports = { module: { loaders: [ { test: /\.woff2?(\?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" } ] }, entry: [ "font-awesome-webpack", "./app.js" ] }; // app.js require('font-awesome-webpack'); // font-awesome.config.js (optional) module.exports = { styles: { mixins: true, core: true, icons: true, larger: true, path: true } };

Debug

Known issues

deprecatedPackage is unmaintained since 2017, last release 0.0.5-beta.2.

fix

Use Font Awesome official webpack setup or font-awesome-sass-loader.

affects: >=0.0.0

gotchaLoader syntax changes between Webpack 1 and 2. Version 0.0.5-beta.1 supports Webpack 2.

fix

Use loaders array for Webpack 1, rules for Webpack 2. Check webpack version.

affects: >=0.0.0

gotcharequire('font-awesome-webpack') must be in application code, not webpack.config.js.

fix

Add the import line to your entry file or a module loaded from it.

affects: >=0.0.0

gotchaCustom config files must be named font-awesome.config.js and font-awesome.config.less and placed next to each other.

fix

Ensure both files exist in same directory as specified in the loader query.

affects: >=0.0.0

deprecatedextract-text-webpack-plugin extraction syntax changed. Old .extract('style-loader', 'css-loader') may fail.

fix

Use .extract({ use: ['css-loader', 'less-loader'], fallback: 'style-loader' }) for newer versions.

affects: >=0.0.0

Errors

Common errors & fixes

Module parse failed: C:/path/to/font-awesome/less/font-awesome.less Unexpected character '@'

Missing less-loader in webpack config.

fix

Add { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' } to loaders.

Error: Cannot find module 'font-awesome-webpack'

Package not installed or missing from node_modules.

fix

Run 'npm install font-awesome-webpack font-awesome' and ensure both are in dependencies.

Module build failed: Error: Couldn't find preset "es2015" relative to directory

Webpack 2 requires explicit loader configuration; older presets may be missing.

fix

Update webpack config to use rules and specify loaders correctly, or downgrade to Webpack 1.

Uncaught Error: Module name "font-awesome-webpack" has not been loaded yet for context

Using require('font-awesome-webpack') in a non-webpack environment or before webpack bootstrap.

fix

Ensure the require is inside a webpack-bundled file; not in a Node.js script.

Upgrade

Version history

0.0.5-beta.2latest on npm

Audit

Dependencies

font-awesomerequiredpeer dependency, provides the Less source and font files

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/gowravshekar/font-awesome-webpack ↗

packagehttps://www.npmjs.com/package/font-awesome-webpack ↗