# font-awesome-webpack

> font-awesome package for webpack

Latest version **0.0.5-beta.2** (published 2017-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install font-awesome-webpack
pnpm add font-awesome-webpack
yarn add font-awesome-webpack
bun add font-awesome-webpack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5-beta.2 |
| Published | 2017-02-24 |
| First published | 2014-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 191 |
| Author | Gowrav Shekar |
| Maintainers | gowravshekar, wolfadex |
| Keywords | font-awesome, webpack |

## Links

- npm: https://www.npmjs.com/package/font-awesome-webpack
- Repository: https://github.com/gowravshekar/font-awesome-webpack
- Issues: https://github.com/gowravshekar/font-awesome-webpack/issues
- npm.io page: https://npm.io/package/font-awesome-webpack

## Dependencies (3)

- [css-loader](https://npm.io/package/css-loader.md) ~0.26.1
- [less-loader](https://npm.io/package/less-loader.md) ~2.2.3
- [style-loader](https://npm.io/package/style-loader.md) ~0.13.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.0.5-beta.2 (latest) — 2017-02-24
- 0.0.4 — 2015-10-02
- 0.0.3 — 2015-02-27
- 0.0.2 — 2014-09-16
- 0.0.1 — 2014-09-10

## README

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:

``` javascript
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:

``` javascript
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:

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

Or simple add it as entry point to your `webpack.config.js`:

``` javascript
module.exports = {
  entry: [
    "font-awesome-webpack!./path/to/font-awesome.config.js",
    "your-existing-entry-point"
  ]
};
```

#### `font-awesome.config.js`

Example:

``` javascript
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:

``` less
@fa-inverse: #eee;
@fa-border-color: #ddd;
```

### extract-text-webpack-plugin

Configure style loader in `font-awesome.config.js`.

Example:

``` javascript
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.

---
_Source: https://npm.io/package/font-awesome-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._