Using the legacy `fa` prefix:
\n \n \n \n \n \nThis demonstrates including the CSS and using basic icons. Ensure your build system (e.g., Webpack) is configured to handle CSS and font files.
\n `;\n document.body.appendChild(container);\n}\n\n// Execute the render function once the DOM is ready\ndocument.addEventListener('DOMContentLoaded', renderIconExample);","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Font 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.","severity":"breaking","affected_versions":">=4.7.0"},{"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.","message":"The `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.","severity":"deprecated","affected_versions":">=4.7.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=4.7.0"},{"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).","message":"Font 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.","severity":"breaking","affected_versions":">=3.1.0"},{"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'] }`.","message":"Using 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.","severity":"gotcha","affected_versions":">=4.7.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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/'] }`.","cause":"Webpack or similar bundler is not configured to process font files (`.ttf`, `.woff`, etc.) from the `font-awesome` package.","error":"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."},{"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'.","cause":"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.","error":"Icons appear as empty squares or missing characters."},{"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 `` or `` elements directly in HTML. If you need a JavaScript API, consider migrating to Font Awesome v5+ using `@fortawesome/*` packages.","cause":"Attempting to access a global `FontAwesome` JavaScript object or API that does not exist in the Font Awesome v4.7.0 package.","error":"ReferenceError: FontAwesome is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}