Font Awesome User Guide

Font Awesome 7.2.0 Free — the iconic font, CSS, and SVG icon framework. This guide covers everything you need to add 2,800+ icons to your web projects using either the Web Fonts + CSS approach or the SVG + JavaScript approach.

1. Quick Start

CDN — Fastest Way to Get Started

Add one line to your HTML <head> and start using icons immediately:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.2.0/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-house"></i>
  <i class="fa-regular fa-heart"></i>
  <i class="fa-brands fa-github"></i>
</body>
</html>

That loads Web Fonts + CSS for all three Free icon families. Icons render as <i> elements with two classes: a style prefix and an icon name.

Tip

If you only need one icon family (e.g., solid icons), load just solid.css and fontawesome.css instead of all.css to reduce payload size.

SVG + JS Alternative

If you prefer SVG rendering over web fonts, use the JavaScript bundle instead:

<head>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.2.0/js/all.min.js"></script>
</head>
<body>
  <i class="fa-solid fa-house"></i>
</body>

The JS bundle automatically finds <i> elements and replaces them with inline <svg> elements at page load.

2. Installation

NPM (Recommended for Build Pipelines)

npm install @fortawesome/fontawesome-free

Then import in your project entry point:

// Import everything (CSS approach)
import '@fortawesome/fontawesome-free/css/all.css';

// Or import everything (JS approach)
import '@fortawesome/fontawesome-free/js/all.js';

Note

Font Awesome requires Node.js >= 6. Any modern Node version satisfies this.

NPM — Individual SVG Icon Packages

For tree-shaking and minimal bundle sizes, install the modular packages:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-brands-svg-icons

Then import only the icons you need:

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faHouse, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
import { faHeart } from '@fortawesome/free-regular-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

library.add(faHouse, faStar, faUser, faHeart, faGithub);
dom.watch(); // Replaces <i> tags with SVGs, watches for new ones

Composer (PHP Projects)

composer require fortawesome/font-awesome

Manual Download

Download the release archive from GitHub, extract it, and reference the files from css/ and webfonts/ (for Web Fonts + CSS) or from js/ (for SVG + JS). Place the directories in your project's public/static assets folder.

When self-hosting Web Fonts + CSS, maintain this directory relationship:

your-project/
  assets/
    css/
      all.min.css          (or individual: fontawesome.min.css + solid.min.css)
    webfonts/
      fa-solid-900.woff2
      fa-solid-900.ttf
      fa-regular-400.woff2
      fa-regular-400.ttf
      fa-brands-400.woff2
      fa-brands-400.ttf

The CSS files reference ../webfonts/ by default, so the webfonts/ directory must be one level up from the css/ directory.

Important

If you place the webfonts in a different location relative to the CSS, you must update the $fa-font-path SCSS variable or manually adjust the @font-face src paths.

Choosing Your Approach

3. Configuration

SVG + JS Configuration

When using the JavaScript approach, Font Awesome exposes a config object you can modify before loading:

<script>
  window.FontAwesomeConfig = {
    autoReplaceSvg: true,       // Replace <i> tags with SVGs
    autoAddCss: true,           // Inject CSS into <head>
    observeMutations: true,     // Watch DOM for new icons
    searchPseudoElements: false,// Scan CSS pseudo-elements (expensive)
    showMissingIcons: true,     // Show placeholder for missing icons
    measurePerformance: false,  // Log timing data to console
    keepOriginalSource: true,   // Keep original <i> in DOM as comment
    styleDefault: 'solid',      // Default icon style
    familyDefault: 'classic',   // Default icon family
    cssPrefix: 'fa',            // CSS class prefix
    mutateApproach: 'async'     // 'async' or 'sync' DOM updates
  };
</script>
<script defer src="path/to/all.min.js"></script>

Set window.FontAwesomeConfig before loading the Font Awesome JS bundle. Any properties not specified use the defaults shown above.

Tip

For most projects, the defaults work perfectly. Only modify config if you have a specific need, such as enabling pseudo-element scanning or disabling automatic replacement for manual control.

Configuration Reference

See the Admin Guide for advanced configuration scenarios and performance tuning.

SCSS Customization

If using the SCSS source files, you can override variables before importing:

// Override the font path for your project structure
$fa-font-path: "../fonts";

// Then import Font Awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/brands";

Available SCSS partials: _animated.scss, _bordered.scss, _core.scss, _functions.scss, _icons.scss, _list.scss, _mixins.scss, _pulled.scss, _rotated-flipped.scss, _sizing.scss, _stacked.scss, _variables.scss, _widths.scss.

See the Admin Guide for the full list of SCSS variables and advanced theming options.

4. Core Usage

Icon Families and Styles (Free Edition)

Font Awesome Free includes three styles in the Classic family:

<!-- Full prefix (recommended) -->
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-brands fa-twitter"></i>

<!-- Short prefix (also works) -->
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="fab fa-twitter"></i>

Note

Pro users have access to many additional families (Sharp, Duotone, and more). In the Free edition, stick with fa-solid, fa-regular, and fa-brands.

Sizing Icons

Font Awesome provides relative and literal sizing classes:

Relative sizes (relative to the parent container's font size):

Literal sizes (exact multiples of the base):

fa-1x, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x

<i class="fa-solid fa-camera fa-xs"></i>
<i class="fa-solid fa-camera fa-sm"></i>
<i class="fa-solid fa-camera"></i>         <!-- default 1x -->
<i class="fa-solid fa-camera fa-lg"></i>
<i class="fa-solid fa-camera fa-xl"></i>
<i class="fa-solid fa-camera fa-2xl"></i>
<i class="fa-solid fa-camera fa-5x"></i>

Fixed-Width and Auto-Width Icons

Use fa-fw to give all icons the same width, which is essential for vertically aligning icons in navigation menus or lists:

<div style="font-size: 2em;">
  <div><i class="fa-solid fa-home fa-fw"></i> Home</div>
  <div><i class="fa-solid fa-cog fa-fw"></i> Settings</div>
  <div><i class="fa-solid fa-user fa-fw"></i> Profile</div>
</div>

Important

In Font Awesome 7, icons default to fixed width. If you need auto-width (fitting the icon's natural aspect ratio), use fa-width-auto. To explicitly request fixed width, use fa-width-fixed. These are new v7 classes.

<!-- v7: opt out of fixed-width default -->
<i class="fa-solid fa-flag fa-width-auto"></i>

<!-- v7: explicitly fixed width (the default) -->
<i class="fa-solid fa-flag fa-width-fixed"></i>

Rotating and Flipping

<!-- Rotation -->
<i class="fa-solid fa-shield fa-rotate-90"></i>
<i class="fa-solid fa-shield fa-rotate-180"></i>
<i class="fa-solid fa-shield fa-rotate-270"></i>

<!-- Custom rotation angle (CSS custom property) -->
<i class="fa-solid fa-shield fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>

<!-- Flipping -->
<i class="fa-solid fa-shield fa-flip-horizontal"></i>
<i class="fa-solid fa-shield fa-flip-vertical"></i>
<i class="fa-solid fa-shield fa-flip-both"></i>

Animating Icons

Apply animation classes for attention-grabbing effects:

<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-triangle-exclamation fa-fade"></i>
<i class="fa-solid fa-heart fa-beat-fade"></i>
<i class="fa-solid fa-arrow-down fa-bounce"></i>
<i class="fa-solid fa-compact-disc fa-flip"></i>
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>

Reverse the spin direction:

<i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>

Customize animation timing with CSS custom properties:

<i class="fa-solid fa-heart fa-beat"
   style="--fa-animation-duration: 0.5s;"></i>

<i class="fa-solid fa-spinner fa-spin"
   style="--fa-animation-duration: 3s; --fa-animation-iteration-count: 3;"></i>

Bordered and Pulled Icons

Create pull-quote style layouts with bordered, floated icons:

<i class="fa-solid fa-quote-left fa-2x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Lists with Icons

Replace default list bullets with icons:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Item one</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Item two</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-spin"></i></span>Loading...</li>
</ul>

5. Common Tasks

Recipe: Loading Spinner

<button disabled>
  <i class="fa-solid fa-spinner fa-spin"></i> Saving...
</button>

Recipe: Icon Button Toolbar

<div class="toolbar">
  <button><i class="fa-solid fa-bold fa-fw"></i></button>
  <button><i class="fa-solid fa-italic fa-fw"></i></button>
  <button><i class="fa-solid fa-underline fa-fw"></i></button>
  <button><i class="fa-solid fa-link fa-fw"></i></button>
  <button><i class="fa-solid fa-image fa-fw"></i></button>
</div>

Recipe: Social Media Links

<nav class="social-links">
  <a href="https://github.com/yourproject" aria-label="GitHub">
    <i class="fa-brands fa-github fa-2x" aria-hidden="true"></i>
  </a>
  <a href="https://twitter.com/yourproject" aria-label="Twitter">
    <i class="fa-brands fa-twitter fa-2x" aria-hidden="true"></i>
  </a>
  <a href="https://discord.gg/yourserver" aria-label="Discord">
    <i class="fa-brands fa-discord fa-2x" aria-hidden="true"></i>
  </a>
</nav>

Recipe: Stacking Icons

Layer two icons on top of each other:

<span class="fa-stack fa-2x">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-brands fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<!-- "No" symbol: ban icon over camera -->
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color: red;"></i>
</span>

The fa-stack-2x icon is the background layer (larger), and fa-stack-1x is the foreground (smaller). Use fa-inverse to flip the foreground icon to white.

Recipe: Layering Icons, Text, and Counters (SVG + JS)

The layering system provides more flexible composition than stacking:

<span class="fa-layers fa-fw fa-3x">
  <i class="fa-solid fa-circle"></i>
  <i class="fa-solid fa-heart fa-inverse" data-fa-transform="shrink-6"></i>
</span>

<!-- Icon with a counter badge -->
<span class="fa-layers fa-fw fa-3x">
  <i class="fa-solid fa-envelope"></i>
  <span class="fa-layers-counter">12</span>
</span>

<!-- Icon with a text label -->
<span class="fa-layers fa-fw fa-4x">
  <i class="fa-solid fa-certificate"></i>
  <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11 rotate--30">NEW</span>
</span>

Position counters with placement classes:

<span class="fa-layers fa-fw fa-3x">
  <i class="fa-solid fa-bell"></i>
  <span class="fa-layers-counter fa-layers-top-right">5</span>
</span>

<span class="fa-layers fa-fw fa-3x">
  <i class="fa-solid fa-envelope"></i>
  <span class="fa-layers-counter fa-layers-bottom-left">99+</span>
</span>

Available positions: fa-layers-top-left, fa-layers-top-right, fa-layers-bottom-left, fa-layers-bottom-right.

Note

Power transforms (data-fa-transform) like shrink-6, up-2, rotate-45 are only available with the SVG + JS approach. They do not work with Web Fonts + CSS.

Recipe: SVG + JS Power Transforms

With the JavaScript approach, you get fine-grained positioning and sizing control:

<i class="fa-solid fa-magic" data-fa-transform="shrink-8 right-6"></i>
<i class="fa-solid fa-magic" data-fa-transform="grow-3 rotate-30 flip-v"></i>
<i class="fa-solid fa-magic" data-fa-transform="shrink-4 up-3 left-2"></i>

Available transforms: grow-{n}, shrink-{n}, up-{n}, down-{n}, left-{n}, right-{n}, rotate-{n}, flip-v, flip-h.

Recipe: Using the JavaScript API Directly

For dynamic icon generation in JavaScript applications:

import { library, icon } from '@fortawesome/fontawesome-svg-core';
import { faCamera, faStar } from '@fortawesome/free-solid-svg-icons';

library.add(faCamera, faStar);

// Generate an icon
const cameraIcon = icon({ prefix: 'fas', iconName: 'camera' });
console.log(cameraIcon.html); // Array of HTML strings

// Insert into the DOM
document.getElementById('my-icon').innerHTML = cameraIcon.html[0];

Recipe: Composing Layers Programmatically

import { library, icon, text, counter, layer, toHtml } from '@fortawesome/fontawesome-svg-core';
import { faCircle, faEnvelope } from '@fortawesome/free-solid-svg-icons';

library.add(faCircle, faEnvelope);

// Generate a text layer
const label = text('Hello', { transform: { size: 12 } });

// Generate a counter
const badge = counter('42');

// Compose layers
const composed = layer((push) => {
  push(icon({ prefix: 'fas', iconName: 'circle' }));
  push(text('7', { transform: { size: 10 }, classes: ['fa-inverse'] }));
});

document.getElementById('badge').innerHTML = toHtml(composed.abstract);

Recipe: Manual SVG Replacement

If you set autoReplaceSvg: false or call noAuto(), trigger replacement manually:

import { dom, noAuto } from '@fortawesome/fontawesome-svg-core';

noAuto(); // Disable automatic replacement

// Later, when ready:
dom.i2svg().then(() => {
  console.log('Icons replaced');
});

// Or start watching the DOM for new icons
dom.watch();

Recipe: Finding Icon Definitions at Runtime

import { findIconDefinition, library } from '@fortawesome/fontawesome-svg-core';
import { faStar } from '@fortawesome/free-solid-svg-icons';

library.add(faStar);

const starDef = findIconDefinition({ prefix: 'fas', iconName: 'star' });
// Returns: { prefix: 'fas', iconName: 'star', icon: [width, height, ligatures, unicode, svgPathData] }

Recipe: Using SVG Sprites

Font Awesome ships SVG sprite files for each icon family:

<!-- Reference a solid icon from the sprite -->
<svg class="icon">
  <use href="path/to/sprites/solid.svg#star"></use>
</svg>

<!-- Reference a brand icon from the sprite -->
<svg class="icon">
  <use href="path/to/sprites/brands.svg#github"></use>
</svg>

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

Recipe: Inline SVG Files

Every icon is available as an individual SVG file under svgs/{style}/{icon-name}.svg:

<!-- Embed as an image -->
<img src="path/to/svgs/solid/star.svg" alt="Star" width="24" height="24">

Or inline the SVG for full CSS control over color and sizing:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24" fill="currentColor">
  <!-- paste SVG path data from the file -->
</svg>

Recipe: Tree-Shaking with Webpack

Import only the icons you use to keep bundle sizes small:

// Only these four icons will be included in your bundle
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faHome, faUser, faCog } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

library.add(faHome, faUser, faCog, faGithub);
dom.watch();

Warning

Avoid importing the entire icon package (e.g., import { fas } from '@fortawesome/free-solid-svg-icons') if you only need a few icons. Each family package exports every icon, so a wildcard import pulls them all into your bundle. Always destructure the specific icons you need.

Recipe: Babel Macro for Automatic Tree-Shaking

Font Awesome includes a Babel macro (import.macro.js) for concise, tree-shaken imports:

import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';

// Each call returns only that icon's definition
const star = solid('star');
const heart = regular('heart');
const github = brands('github');

Configure in babel-plugin-macros.config.js:

module.exports = {
  'fontawesome-svg-core': {
    license: 'free'
  }
};

Recipe: Accessibility Best Practices

Decorative icons (purely visual, adjacent to visible text):

<a href="/settings">
  <i class="fa-solid fa-cog" aria-hidden="true"></i> Settings
</a>

Semantic icons (convey meaning without adjacent text):

<!-- Option 1: aria-label on the parent -->
<a href="/settings" aria-label="Settings">
  <i class="fa-solid fa-cog" aria-hidden="true"></i>
</a>

<!-- Option 2: visually-hidden text -->
<a href="/settings">
  <i class="fa-solid fa-cog" aria-hidden="true"></i>
  <span class="sr-only">Settings</span>
</a>

When using the SVG + JS approach, Font Awesome automatically adds aria-hidden="true" to generated <svg> elements. Provide a title attribute to include a <title> element inside the SVG for screen readers:

<i class="fa-solid fa-cog" title="Settings"></i>
<!-- SVG + JS renders: <svg aria-labelledby="..." role="img"><title>Settings</title>...</svg> -->

Recipe: CSS Pseudo-Elements

Use Font Awesome icons in CSS ::before and ::after pseudo-elements (Web Fonts + CSS approach):

.icon-star::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 900 = solid, 400 = regular */
  content: "\f005"; /* Unicode for fa-star */
}

For SVG + JS, pseudo-element support must be explicitly enabled since it is off by default due to performance cost:

window.FontAwesomeConfig = {
  searchPseudoElements: true
};

Caution

Enabling searchPseudoElements in SVG + JS mode performs a full DOM scan looking for pseudo-elements that reference Font Awesome. This can significantly impact page load performance on large pages. Use sparingly and test thoroughly.

Recipe: Migrating from v4 or v5

If upgrading from Font Awesome 4 or 5, use the compatibility shims to avoid rewriting all your markup at once:

CSS shims (load alongside your main CSS):

<!-- For v4 compatibility -->
<link rel="stylesheet" href="css/v4-font-face.css">
<link rel="stylesheet" href="css/v4-shims.css">

<!-- For v5 compatibility -->
<link rel="stylesheet" href="css/v5-font-face.css">

JS shims (load alongside your main JS):

<script defer src="js/v4-shims.js"></script>

These map old icon names (e.g., fa-star-o, fa-file-text) to their v7 equivalents automatically. Once migration is complete, remove the shim files to reduce payload.

6. Troubleshooting

Icons Not Showing (Blank Squares or Nothing)

Symptom: Icons render as empty squares, question marks, or nothing at all.

Solutions:

1. Verify the CSS or JS file is loading (check browser DevTools Network tab for 404s)
2. Confirm both required classes are present: a style prefix (fa-solid, fa-regular, or fa-brands) AND the icon name (fa-house, fa-star, etc.)
3. Check the icon exists in the Free edition — many icons are Pro-only
4. For Web Fonts + CSS: verify the webfonts/ directory is accessible and the path from CSS to webfonts is correct (../webfonts/ by default)
5. Clear browser cache — stale cached CSS can reference missing font files

Icons Appear But Wrong Style

Symptom: Requested a regular (outline) icon but getting a solid (filled) icon.

Explanation: The Free edition has ~270 regular icons versus ~2,000+ solid icons. If a regular variant does not exist for a given icon, Font Awesome falls back to solid. Verify the icon you want has a regular variant available in the Free edition.

Web Font Files Load Slowly

Symptom: Icons flash or appear late, especially fa-solid-900.woff2.

Solutions:

1. Preload the font file:

   <link rel="preload" href="/webfonts/fa-solid-900.woff2" as="font"
         type="font/woff2" crossorigin>
   

2. Host fonts on a CDN closer to your users
3. Subset to only the styles you need (load solid.css instead of all.css)
4. Consider switching to SVG + JS if you only use a few icons (tree-shaking drastically reduces payload)

SVG + JS: Icons Not Replacing

Symptom: <i> tags remain in the DOM instead of becoming <svg>.

Solutions:

1. Ensure the JS file is loaded with the defer attribute so the DOM is ready before execution
2. If loading dynamically, call dom.i2svg() after adding new icon elements
3. If noAuto() was called, replacement must be triggered manually
4. Check that autoReplaceSvg is not set to false in config

SVG + JS: Icons Disappear After Dynamic DOM Updates

Symptom: Icons work on initial load but vanish when content is dynamically inserted.

Solution: Ensure observeMutations is true (the default) or explicitly call dom.i2svg() after DOM changes. If using a framework like React, Vue, or Angular, use the official Font Awesome component for that framework instead of the vanilla JS approach.

Conflict with Multiple Font Awesome Versions

Font Awesome 7 includes a conflict-detection.js module. If you see console warnings about conflicts, you likely have two versions loaded (e.g., a WordPress plugin loading its own copy alongside yours).

Solution: Remove the duplicate. Only one Font Awesome version should load per page.

Print Stylesheets: Duplicated Icons

Firefox and Safari may render duplicated icons in print output when using SVG + JS.

Workaround: Add a print-specific CSS rule:

@media print {
  .svg-inline--fa {
    display: inline;
  }
}

SVG Clipping: Icons Cut Off at Top and Bottom

Some icons may appear clipped when rendered as SVG.

Workaround: Add overflow visibility to SVG icons:

.svg-inline--fa {
  overflow: visible;
}

Vertical Misalignment of Icons with Text

Symptom: Icons do not align vertically with adjacent text.

Solutions:

1. Use fa-fw (or fa-width-fixed) for consistent width across icons
2. Apply vertical-align on the icon element:

   .fa-solid, .fa-regular, .fa-brands {
     vertical-align: middle;
   }
   

3. For flex layouts, use align-items: center on the parent container

v7: <title> Elements Not Rendering in SVGs

If upgrading from v6, <title> elements inside SVG icons may no longer be generated by default.

Workaround: Add the title attribute to your <i> tag and Font Awesome will include a <title> in the SVG output. Alternatively, use aria-label on the parent element for accessibility.

v7: Missing --fa-width and --fa-display CSS Custom Properties

When using the React SVG component, the CSS custom properties --fa-width and --fa-display may not be defined.

Workaround: Define them manually in your CSS:

:root {
  --fa-width: 1.25em;
  --fa-display: inline-block;
}

NPM Registry: 404 or Redirect Errors

If npm install fails with 404 errors or unexpected 301 redirects from npm.fontawesome.com, the Font Awesome private registry may be experiencing issues.

Workaround: Install from the public npm registry instead (the Free packages are published there):

npm install @fortawesome/fontawesome-free

If you have a .npmrc pointing to npm.fontawesome.com, temporarily remove or rename it.

Webpack Tree-Shaking Not Working

If your bundle includes all icons despite importing only specific ones:

1. Ensure you are importing from the individual icon packages (@fortawesome/free-solid-svg-icons), not from @fortawesome/fontawesome-free/js/all.js
2. Verify Webpack is running in production mode (mode: 'production')
3. Check that sideEffects is properly set in package.json (Font Awesome's packages include this)

7. FAQ

Q: What is the difference between Font Awesome Free and Pro? Free includes ~2,800 icons across three styles (solid, regular, brands). Pro adds thousands more icons plus additional families like Sharp, Duotone, Sharp Duotone, and many more. This guide covers the Free edition only.

Q: Can I use Font Awesome in commercial projects? Yes. The code is MIT-licensed, the fonts are SIL OFL 1.1, and the icons are CC BY 4.0. Attribution is required for the icons but is typically satisfied by keeping the license files in your project.

Q: Should I use Web Fonts + CSS or SVG + JS? Use Web Fonts + CSS for simplicity and maximum compatibility. Use SVG + JS when you need power transforms, layering, tree-shaking, or automatic accessibility attributes. See the comparison table in Section 2.

Q: How do I find the class name for a specific icon? Browse the icon gallery at fontawesome.com/icons. Filter by "Free" to see available icons. Each icon page shows the exact class names to use.

Q: Why is my bundle so large? You are likely importing an entire icon package. Use tree-shaking: import individual icons by name (import { faHome } from '@fortawesome/free-solid-svg-icons') and add them to the library. See the tree-shaking recipe in Section 5.

Q: How do I use Font Awesome with React, Vue, or Angular? Font Awesome provides official framework components. Install the SVG core plus the relevant component package (e.g., @fortawesome/react-fontawesome for React). The framework components handle rendering and lifecycle management automatically.

Q: Can I still use v4 or v5 icon names after upgrading to v7? Yes. Load the compatibility shims (v4-shims.css/v4-shims.js for v4, v5-font-face.css for v5) to map old icon names to their v7 equivalents. See the migration recipe in Section 5.

Q: How do I change icon color? Icons inherit the CSS color property from their parent:

<i class="fa-solid fa-star" style="color: gold;"></i>

.my-icon { color: #ff6600; }

Q: How do I animate an icon only on hover? Do not apply the animation class directly. Instead, toggle it with CSS:

.hover-spin:hover .fa-solid {
  animation: fa-spin 1s linear infinite;
}

<span class="hover-spin">
  <i class="fa-solid fa-cog"></i> Settings
</span>

Q: My self-hosted setup works locally but not in production. What gives? Most likely a CORS issue. If your fonts are served from a different domain or subdomain, add CORS headers to your web server:

Access-Control-Allow-Origin: *

Also verify the font file paths are correct relative to the CSS file in your production build output.

Q: What is the icon definition format? Each icon is defined as an object with this structure:

{
  "prefix": "fas",
  "iconName": "star",
  "icon": [576, 512, ["ligatures"], "\uf005", "M316.9 18C..."]
}

The icon array contains: [width, height, ligatures, unicode, svgPathData].

Q: Where is the Admin Guide for architecture and deployment details? See the Admin Guide for full configuration reference, SCSS variable documentation, icon definition internals, architecture overview, and deployment considerations.