Registry / font-awesome

font-awesome

library4.7.0jsnpmunverified

Font Awesome v4.7.0 is a legacy iconic font and CSS framework that provides a suite of 675 pictographic icons for web projects. This specific npm package, `font-awesome`, corresponds to the 4.x series, with `4.7.0` being its final release in October 2016. It renders icons using web fonts and CSS classes (e.g., `fa fa-home`). The 4.x series is now end-of-life and no longer actively maintained. Font Awesome has since evolved into the 5.x, 6.x, and 7.x series, which are distributed under `@fortawesome` scoped npm packages and primarily utilize SVG-based rendering for improved flexibility and performance. Key differentiators of v4 were its simplicity, wide adoption, and vector scalability via fonts. Its release cadence for this package is effectively stopped, as newer versions are under different packages.

npm install font-awesome

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FONT-AWESOME

font-awesome

javascriptv4.7.0

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.

CSS Stylesheet

✓ import 'font-awesome/css/font-awesome.min.css';

For bundlers (e.g., Webpack, Vite) to include Font Awesome 4.7.0 styles. This imports CSS, not a JavaScript module or symbol.

No JavaScript Module

✓

✗ const FontAwesome = require('font-awesome');

The `font-awesome` v4.7.0 npm package primarily provides CSS and font files, not a JavaScript module for direct functional import. Attempting to `require` or `import` it as a JS module will typically yield an empty object or errors.

Icon Classes (HTML)

✓

Font Awesome 4.x icons are applied directly via CSS classes in HTML. There are no direct JavaScript imports for individual icons in this version, unlike the `@fortawesome` packages.

Demonstrates how to include Font Awesome v4.7.0's CSS in a modern JavaScript/TypeScript project using an import statement and then display several icons with standard classes.

import 'font-awesome/css/font-awesome.min.css'; function renderIconExample() { const container = document.createElement('div'); container.innerHTML = ` <h1>Font Awesome v4.7.0 Example</h1> Using the legacy `fa` prefix: This demonstrates including the CSS and using basic icons. Ensure your build system (e.g., Webpack) is configured to handle CSS and font files. `; document.body.appendChild(container); } // Execute the render function once the DOM is ready document.addEventListener('DOMContentLoaded', renderIconExample);

Debug

Known issues

breakingFont Awesome v5.0.0 and later introduced significant breaking changes, including a shift from font-based icons to SVG with JavaScript, and new icon class prefixes (e.g., `fa-solid` for solid icons instead of `fa`). Direct usage of v4 classes will not work with v5+ assets.

fix

For new projects, use `@fortawesome/fontawesome-free` or `@fortawesome/fontawesome-pro` (v5+) packages. For upgrading, refer to Font Awesome's official migration guide for v4 to v5/v6. Consider using `@fortawesome/fontawesome-svg-core` with a v4 shim if a full rewrite is not immediately feasible.

affects: >=4.7.0

deprecatedThe `font-awesome` npm package (v4.x series) is end-of-life and no longer receives updates or active maintenance. Users are strongly encouraged to migrate to the modern `@fortawesome` scoped packages (v5, v6, v7) for continued support, new features, and security updates.

fix

Migrate your project to use `@fortawesome/fontawesome-free` (or Pro) with its React/Vue/Angular components, or use its Web Fonts + CSS or SVG + JS implementations directly.

affects: >=4.7.0

gotchaThe `font-awesome` npm package refers specifically to the legacy 4.x series. The current, actively maintained versions (5.x, 6.x, 7.x) of Font Awesome are published under `@fortawesome/*` scoped packages (e.g., `@fortawesome/fontawesome-free`). Attempting to install 'font-awesome' without a specific version might lead to installing the old, unmaintained 4.7.0 version inadvertently.

fix

Always explicitly install `@fortawesome/fontawesome-free` for modern Font Awesome, or specify `font-awesome@4.7.0` if you specifically intend to use the legacy version.

affects: >=4.7.0

breakingFont Awesome v3.1.0 removed native Sass support, requiring users to switch to Less or manual CSS compilation from that version onward within the v3/v4 series.

fix

For projects requiring Sass, either downgrade to an older v3.0.x version or manually adapt the CSS/Less files for Sass integration, or consider using community-maintained Sass ports (e.g., `font-awesome-sass` npm package).

affects: >=3.1.0

gotchaUsing Font Awesome 4.7.0 with modern bundlers like Webpack requires specific configuration to properly handle font file loading. Without correct `file-loader` or `url-loader` setup, the font files (e.g., `.ttf`, `.woff`) will fail to load, resulting in icons appearing as empty squares.

fix

Configure your Webpack `module.rules` to include `file-loader` or `url-loader` for font file extensions (e.g., `.eot`, `.ttf`, `.woff`, `.woff2`, `.svg`) and ensure the `publicPath` is correctly set for these assets. Example: `{ test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/, use: ['file-loader'] }`.

affects: >=4.7.0

Errors

Common errors & fixes

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 ... You may need an appropriate loader to handle this file type.

Webpack or similar bundler is not configured to process font files (`.ttf`, `.woff`, etc.) from the `font-awesome` package.

fix

Install `file-loader` (or `url-loader`) and add a rule to your Webpack configuration's `module.rules` to handle various font file extensions, pointing to the `font-awesome/fonts` directory. Example: `{ test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/, use: ['file-loader?name=[name].[ext]&outputPath=fonts/'] }`.

Icons appear as empty squares or missing characters.

This usually indicates that the Font Awesome font files (`.woff`, `.ttf`, etc.) are not being loaded correctly by the browser or the CSS path to these fonts is incorrect, or the `font-family` property is not applied.

fix

Verify that your `font-awesome.min.css` file is correctly linked and loaded. For bundlers, ensure font assets are correctly processed by `file-loader` and their output path is accessible. Check browser developer tools for 404 errors on font files. Also, confirm the `font-family` property is correctly set in your CSS to 'FontAwesome'.

ReferenceError: FontAwesome is not defined

Attempting to access a global `FontAwesome` JavaScript object or API that does not exist in the Font Awesome v4.7.0 package.

fix

Font Awesome v4.7.0 is primarily a CSS and font library and does not expose a global JavaScript API for icon manipulation. Icons are used by applying CSS classes to `<i>` or `<span>` elements directly in HTML. If you need a JavaScript API, consider migrating to Font Awesome v5+ using `@fortawesome/*` packages.

Upgrade

Version history

4.7.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/FortAwesome/Font-Awesome ↗

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

homepagehttps://fontawesome.com ↗