### Install Font Awesome Free Icons (npm)

Source: https://docs.fontawesome.com/web/use-with/react

Installs Font Awesome Free icon packages using npm. This allows usage of free icons without additional configuration, supporting various styles.

```bash
npm install @fortawesome/free-solid-svg-icons
```

--------------------------------

### Install Font Awesome Free Icons (yarn)

Source: https://docs.fontawesome.com/web/use-with/react

Installs Font Awesome Free icon packages using yarn. This allows usage of free icons without additional configuration, supporting various styles.

```bash
yarn add @fortawesome/free-solid-svg-icons
```

--------------------------------

### Install react-fontawesome Component (npm)

Source: https://docs.fontawesome.com/web/use-with/react

Installs the official Font Awesome component for React using npm. This package simplifies the integration of Font Awesome icons within React applications.

```bash
npm install @fortawesome/react-fontawesome
```

--------------------------------

### Install Font Awesome Kit Package (npm)

Source: https://docs.fontawesome.com/web/use-with/react

Installs a Font Awesome Kit package using npm. This is the recommended method for using Pro icons and integrating with Font Awesome Kits via package managers.

```bash
npm install @fortawesome/fontawesome-pro
```

--------------------------------

### Install Font Awesome Kit Package (yarn)

Source: https://docs.fontawesome.com/web/use-with/react

Installs a Font Awesome Kit package using yarn. This is the recommended method for using Pro icons and integrating with Font Awesome Kits via package managers.

```bash
yarn add @fortawesome/fontawesome-pro
```

--------------------------------

### Install Font Awesome Pro Icons (npm)

Source: https://docs.fontawesome.com/web/use-with/react

Installs individual Font Awesome Pro icon packages using npm. Use with caution as full styles are large; consider Kit packages for efficiency. Requires an active Pro subscription and prior configuration.

```bash
npm install @fortawesome/pro-solid-svg-icons
```

--------------------------------

### Install Font Awesome Pro Icons (yarn)

Source: https://docs.fontawesome.com/web/use-with/react

Installs individual Font Awesome Pro icon packages using yarn. Use with caution as full styles are large; consider Kit packages for efficiency. Requires an active Pro subscription and prior configuration.

```bash
yarn add @fortawesome/pro-solid-svg-icons
```

--------------------------------

### Install Font Awesome SVG Core (npm)

Source: https://docs.fontawesome.com/web/use-with/react

Installs the core Font Awesome SVG package using npm. This package provides essential utilities required for Font Awesome icons to function correctly in your project.

```bash
npm install @fortawesome/fontawesome-svg-core
```

--------------------------------

### Install react-fontawesome Component (yarn)

Source: https://docs.fontawesome.com/web/use-with/react

Installs the official Font Awesome component for React using yarn. This package simplifies the integration of Font Awesome icons within React applications.

```bash
yarn add @fortawesome/react-fontawesome
```

--------------------------------

### Install Font Awesome SVG Core (yarn)

Source: https://docs.fontawesome.com/web/use-with/react

Installs the core Font Awesome SVG package using yarn. This package provides essential utilities required for Font Awesome icons to function correctly in your project.

```bash
yarn add @fortawesome/fontawesome-svg-core
```

--------------------------------

### Add Font Awesome Icons using HTML <i> Tag

Source: https://docs.fontawesome.com/web/setup/get-started

Demonstrates how to render Font Awesome icons within an HTML page. Icons are added as classes to an `<i>` tag, combining the 'fa' prefix with the icon's name and style (e.g., 'fas' for solid, 'far' for regular).

```html
<i class="fa-solid fa-star"></i> <!-- Solid star icon -->
<i class="fa-regular fa-heart"></i> <!-- Regular heart icon -->
```

--------------------------------

### Install Pro All Inclusive Package via npm

Source: https://docs.fontawesome.com/web/setup/packages

Installs the complete Font Awesome Pro for the Web package using npm. This includes all assets provided in the Pro download, offering comprehensive icon access.

```bash
npm install "@fortawesome/pro-fontawesome-free"
```

--------------------------------

### Install Free All Inclusive Package via yarn

Source: https://docs.fontawesome.com/web/setup/packages

Installs the entire Font Awesome Free for the Web package using yarn. This command fetches all assets from the Free download, granting access to all available free icons.

```bash
yarn add "@fortawesome/fontawesome-free"
```

--------------------------------

### Complete iOS Setup for React Native CLI Projects

Source: https://docs.fontawesome.com/web/use-with/react-native

Command to run for bare `react-native-cli` projects to complete the Font Awesome setup on iOS. This ensures proper linking and functionality.

```bash
react-native link react-native-fontawesome
```

--------------------------------

### Install Pro All Inclusive Package via yarn

Source: https://docs.fontawesome.com/web/setup/packages

Installs the entire Font Awesome Pro for the Web package using yarn. This command fetches all assets included in the Pro download, providing a full suite of icons.

```bash
yarn add "@fortawesome/pro-fontawesome-free"
```

--------------------------------

### Illustrator Duotone SVG Example

Source: https://docs.fontawesome.com/web/add-icons/upload-icons/prep-icons

This SVG code example illustrates the structure for a duotone icon exported from Illustrator, featuring two separate path elements with distinct opacity levels.

```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/>
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor" opacity=".4"/>
</svg>
```

--------------------------------

### Install Free All Inclusive Package via npm

Source: https://docs.fontawesome.com/web/setup/packages

Installs the complete Font Awesome Free for the Web package using npm. This package includes all assets from the Free download, providing access to all free icons.

```bash
npm install "@fortawesome/fontawesome-free"
```

--------------------------------

### Get pnpm Configuration Information

Source: https://docs.fontawesome.com/web/setup/packages

Displays configuration settings for pnpm, with a focus on the 'config from' section. This is helpful for understanding the source of pnpm's configuration values.

```bash
pnpm config list
```

--------------------------------

### Add Font Awesome Kit Embed Code to HTML Head

Source: https://docs.fontawesome.com/web/setup/get-started

This snippet shows how to include the Font Awesome Kit embed code within the `<head>` section of an HTML document. This is the primary method for enabling Font Awesome icons on a webpage. Ensure the `href` attribute points to your unique Kit URL.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Project</title>
  <!-- Add Font Awesome Kit embed code here -->
  <script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>
```

--------------------------------

### NPM Install Command with Double Quotes (Shell)

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Demonstrates using double quotes for NPM install commands on Windows to avoid potential path issues caused by single quotes.

```shell
npm install "@fortawesome/fontawesome-svg-core" "@fortawesome/free-solid-svg-icons"
```

--------------------------------

### Include Custom Icons from Downloaded Kit (Web Fonts)

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

This example demonstrates how to reference custom icon CSS and web font files from a downloaded Font Awesome kit for custom icon display.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Font Awesome Icons</title>
    <!-- Link core Font Awesome CSS -->
    <link rel="stylesheet" href="path/to/your/kit/css/fontawesome.css">
    <!-- Link custom icons CSS -->
    <link rel="stylesheet" href="path/to/your/kit/css/custom-icons.css">
    <!-- Link specific style CSS (e.g., sharp solid) -->
    <link rel="stylesheet" href="path/to/your/kit/css/sharp-solid.css">
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .icon-container { margin-bottom: 15px; font-size: 24px; }
    </style>
</head>
<body>
    <h1>Custom Font Awesome Icons</h1>
    <div class="icon-container">
        <!-- Example using a custom icon -->
        <i class="fa-sharp fa-solid fa-custom-icon"></i> Custom Icon
    </div>
</body>
</html>
```

--------------------------------

### Get npm Configuration Information

Source: https://docs.fontawesome.com/web/setup/packages

Retrieves detailed configuration information for npm. This command is useful for troubleshooting and understanding how npm is configured for your project.

```bash
npm config list
```

--------------------------------

### Install Font Awesome Kit Package via yarn

Source: https://docs.fontawesome.com/web/setup/packages

Installs a Font Awesome Kit Package using yarn. Ensure you replace `KIT_CODE` with your Kit's specific ID. This command adds the relevant package to your project.

```bash
yarn add "@fortawesome/fontawesome-kit-_{KIT_CODE}"
```

--------------------------------

### Install Font Awesome Kit Package via npm

Source: https://docs.fontawesome.com/web/setup/packages

Installs a Font Awesome Kit Package using npm. Replace `KIT_CODE` with your Kit's unique identifier. This command fetches the specific package associated with your Kit.

```bash
npm install "@fortawesome/fontawesome-kit-_{KIT_CODE}"
```

--------------------------------

### Get yarn Configuration Information

Source: https://docs.fontawesome.com/web/setup/packages

Fetches configuration information for yarn, including details about npmScopes. This command helps diagnose package resolution issues and verify settings.

```bash
yarn config --why
```

--------------------------------

### Install Free SVG Icon Package via npm

Source: https://docs.fontawesome.com/web/setup/packages

Installs a specific Font Awesome Free SVG icon package using npm. This approach allows for granular inclusion of Free icon styles, paired with the SVG Core package.

```bash
npm install "@fortawesome/free-solid-svg-icons" "@fortawesome/vue-fontawesome"
```

--------------------------------

### Include Custom Icons from Downloaded Kit (SVG+JS)

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

This example shows how to include the Font Awesome JavaScript file and custom icon JavaScript file to render custom icons using SVG.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Font Awesome Icons (SVG+JS)</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .icon-container { margin-bottom: 15px; font-size: 24px; }
    </style>
</head>
<body>
    <h1>Custom Font Awesome Icons (SVG+JS)</h1>
    <div class="icon-container">
        <!-- Font Awesome will render this using SVG+JS -->
        <i class="fa-sharp fa-solid fa-custom-icon"></i> Custom Icon
    </div>

    <!-- Load Font Awesome JS -->
    <script src="path/to/your/kit/js/fontawesome.js"></script>
    <!-- Load custom icons JS -->
    <script src="path/to/your/kit/js/custom-icons.js"></script>
</body>
</html>
```

--------------------------------

### Install Pro SVG Icon Package via yarn

Source: https://docs.fontawesome.com/web/setup/packages

Installs a chosen Font Awesome Pro SVG icon package using yarn. This method lets you select individual icon styles, combining them with the SVG Core package.

```bash
yarn add "@fortawesome/pro-solid-svg-icons" "@fortawesome/vue-fontawesome"
```

--------------------------------

### Install Free SVG Icon Package via yarn

Source: https://docs.fontawesome.com/web/setup/packages

Installs a selected Font Awesome Free SVG icon package using yarn. This enables you to add specific Free icon styles to your project along with the SVG Core package.

```bash
yarn add "@fortawesome/free-solid-svg-icons" "@fortawesome/vue-fontawesome"
```

--------------------------------

### Linking Font Awesome CSS in HTML

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

This example shows how to link the main Font Awesome CSS file and specific style CSS files within an HTML document. Ensure the paths are correct relative to your project structure.

```html
<link rel="stylesheet" href="/css/fontawesome.css">
<link rel="stylesheet" href="/css/solid.css">
<link rel="stylesheet" href="/css/brands.css">
```

--------------------------------

### Using ByPrefixAndName with React (Kit Pkg)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Example of using the shorthand prefix to specify icon family and style in React when using Kit Packages. This is a concise way to reference icons.

```jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function Example() {
  return (
    <FontAwesomeIcon icon={["fas", "user-secret"]}/>
  );
}
```

--------------------------------

### Using Font Awesome SVG Sprites

Source: https://docs.fontawesome.com/web/add-icons/how-to

Provides an example of how to use Font Awesome's SVG sprites for efficient icon integration without JavaScript.

```HTML
<svg class="fa-svg-icon">
  <use xlink:href="#icon-name"></use>
</svg>
```

--------------------------------

### Install Pro SVG Icon Package via npm

Source: https://docs.fontawesome.com/web/setup/packages

Manually installs a specific Font Awesome Pro SVG icon package using npm. This allows you to include only the icon styles you need, alongside the SVG Core package.

```bash
npm install "@fortawesome/pro-solid-svg-icons" "@fortawesome/vue-fontawesome"
```

--------------------------------

### Illustrator Monotone SVG Example

Source: https://docs.fontawesome.com/web/add-icons/upload-icons/prep-icons

This code snippet demonstrates how shapes are combined into a single path for a monotone icon, as exported from Adobe Illustrator.

```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
```

--------------------------------

### Install Font Awesome for Vue with Nuxt

Source: https://docs.fontawesome.com/web/use-with/vue/use-with

This snippet shows the npm and yarn commands to install the Font Awesome SVG core library and the vue-fontawesome component, which are necessary for using Font Awesome icons in a Nuxt project.

```bash
npm install @fortawesome/fontawesome-svg-core vue-fontawesome
```

```bash
yarn add @fortawesome/fontawesome-svg-core vue-fontawesome
```

--------------------------------

### Install Font Awesome React Native Component

Source: https://docs.fontawesome.com/web/use-with/react-native

Installs the Font Awesome React Native component package, which allows you to render icons within your React Native application.

```bash
npm install --save react-native-fontawesome
```

```bash
yarn add react-native-fontawesome
```

--------------------------------

### Font Awesome v4 Icon Reference

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

Demonstrates the legacy Font Awesome v4 way of referencing an icon using the `<i>` tag and a class name. This code snippet shows how a 'user' icon would have been referenced in older versions.

```html
<i class="fa fa-user"></i>
```

--------------------------------

### Configure .yarnrc.yml for Kit Packages

Source: https://docs.fontawesome.com/web/setup/packages

Configure your .yarnrc.yml file to use Font Awesome Kit Packages through a package manager. This setup enables the use of your custom or subsetted icon kits.

```yaml
npmRegistries:
  '@fortawesome':
    npmAuthToken: "${env.npm_TOKEN}"
    location: "https://npm.fontawesome.com"
```

--------------------------------

### Install Font Awesome Icon Packages for React Native

Source: https://docs.fontawesome.com/web/use-with/react-native

Installs specific Font Awesome icon packages for React Native. You can choose between Kit Packages or individual SVG Icon Packages based on your needs.

```bash
npm install --save @fortawesome/free-solid-svg-icons
```

```bash
yarn add @fortawesome/free-solid-svg-icons
```

```bash
npm install --save @fortawesome/free-regular-svg-icons
```

```bash
yarn add @fortawesome/free-regular-svg-icons
```

```bash
npm install --save @fortawesome/free-brands-svg-icons
```

```bash
yarn add @fortawesome/free-brands-svg-icons
```

--------------------------------

### Install Font Awesome SVG Core for React Native

Source: https://docs.fontawesome.com/web/use-with/react-native

Installs the core Font Awesome SVG package for React Native using npm or yarn. This package provides the necessary utilities for icon functionality.

```bash
npm install --save @fortawesome/fontawesome-svg-core
```

```bash
yarn add @fortawesome/fontawesome-svg-core
```

--------------------------------

### Import All Icons from a Style (Vue)

Source: https://docs.fontawesome.com/web/use-with/vue/dig-deeper

This example demonstrates how to import an entire icon style library, such as all free solid icons. Use with caution due to potential bundle size increases. It's recommended to use tree shaking for better performance.

```javascript
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fas);

// Now all free solid icons are available.
```

--------------------------------

### Add Font Awesome Kit Code to functions.php

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

This PHP code snippet is used to enqueue the Font Awesome Kit, allowing you to use Font Awesome icons in your WordPress site. It requires your unique Kit embed code.

```php
function enqueue_font_awesome_kit() {
    wp_enqueue_script('font-awesome-kit', 'https://kit.fontawesome.com/YOUR_KIT_CODE.js', array(), null, true);
}
```

--------------------------------

### Adding Icons to HTML with Font Awesome CSS

Source: https://docs.fontawesome.com/web/use-with/scss

Provides an example of how to reference Font Awesome icons directly in HTML markup once the compiled CSS is included in the project. This is the standard method for displaying icons.

```html
<i class="fa-solid fa-coffee"></i>
<i class="fa-light fa-gear"></i>
```

--------------------------------

### Use Font Awesome Icons in Next.js Pages

Source: https://docs.fontawesome.com/web/use-with/react/use-with

Example of how to import and use a Font Awesome icon within a Next.js page component.

```typescript
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

function CoffeePage() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
      Coffee is served!
    </div>
  );
}
```

--------------------------------

### Add Custom Icons to Font Awesome Library in Vue (String)

Source: https://docs.fontawesome.com/web/use-with/vue/add-icons

Provides an example of adding custom icons to the Font Awesome Library in Vue, which can then be used as strings in templates.

```javascript
import { library } from "@fortawesome/fontawesome-svg-core";

// Assuming 'customIcon' is imported from your custom icon set
// import { customIcon } from "@/path/to/custom-icons";

// library.add(customIcon);

// In your Vue template:
// <font-awesome-icon icon="custom-icon-name" />
```

--------------------------------

### Font Awesome Conflict Resolution in WordPress

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

This PHP code helps resolve conflicts when multiple versions of Font Awesome are present on a WordPress site. It works by creating a blocklist of conflicting script hashes.

```php
function fa_conflict_resolver() {
    $hashes_to_remove = array(
        '7ca699f29404dcdb477ffe225710067f', // Font Awesome 4.7.0
        '3c937b6d9b50371df1e78b5d70e11512' // Font Awesome 4.7.0 CDN URL
    );

    // Logic to detect and remove conflicting scripts based on hashes
    // (This is a simplified example, actual implementation might be more complex)
    add_action('wp_head', function() use ($hashes_to_remove) {
        // Example: Check for conflicting scripts and remove them
        // This part would involve more sophisticated detection logic
    });
}
```

--------------------------------

### Add Font Awesome CDN URL to functions.php

Source: https://docs.fontawesome.com/web/use-with/wordpress/install-manually

This PHP code snippet demonstrates how to directly add the Font Awesome CDN link to your WordPress theme's functions.php file. This method is an alternative to using a Font Awesome Kit.

```php
function add_font_awesome_cdn() {
    wp_enqueue_style('font-awesome-cdn', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css', array(), '5.15.4', 'all');
}
```

--------------------------------

### Apply Custom Color to Font Awesome Icons with CSS Selectors

Source: https://docs.fontawesome.com/web/style/custom

Demonstrates how to use CSS selectors to apply custom colors to Font Awesome icons. It shows examples of targeting general icon styles and specific icon names.

```css
.fa-solid { color: blue; }
.fa-regular { color: green; }
.fa-light { color: purple; }
.fa-thin { color: orange; }
.fa-duotone { color: red; }
.fa-brands { color: cyan; }
.fa-sharp-solid { color: magenta; }

.fa-user { color: navy; }
.fa-font-awesome { color: maroon; }
```

--------------------------------

### Using Sharp Duotone Font Awesome Icons with CSS

Source: https://docs.fontawesome.com/web/add-icons/pseudo-elements

This CSS rule demonstrates how to adapt the common Duotone icon setup for Sharp Duotone icons by changing the font family CSS property.

```css
.icon-sharp-duotone::before,
.icon-sharp-duotone::after {
  font-family: "Font Awesome 6 Sharp Duotone";
  /* ... other common duotone styles */
}
```

--------------------------------

### Font Awesome SCSS Variables for Customization

Source: https://docs.fontawesome.com/web/use-with/scss

Font Awesome's SCSS version utilizes several variables to simplify setup and customization. These variables control prefixes, icon styles, font families, display properties, sizing, and more.

```scss
$css-prefix: "fa";
$style: "regular";
$family: "Font Awesome 6 Free";
$display: inline-block;
$font-display: swap;
$fw-width: auto;
$inverse: false;
$border-box-sizing: border-box;
$border-color: currentColor;
$border-padding: 0.25em;
$border-radius: 0.25rem;
$border-style: solid;
$border-width: 1px;
$li-width: 2em;
$li-margin: 0.75em;
$pull-margin: 1em;
$primary-opacity: 1;
$secondary-opacity: 0.4;
$size-scale-base: 1rem;
$size-scale-2xs: 0.625rem;
$size-scale-xs: 0.75rem;
$size-scale-sm: 0.875rem;
$size-scale-lg: 1.25rem;
$size-scale-xl: 1.5rem;
$size-scale-2xl: 2rem;
$stack-vertical-align: baseline;
$stack-width: 3.5em;
$stack-z-index: 2;
$font-path: "../webfonts";
```

--------------------------------

### Reference Individual Font Awesome Icons with CSS Pseudo-elements

Source: https://docs.fontawesome.com/web/add-icons/pseudo-elements

This CSS demonstrates how to add specific Font Awesome icons using their Unicode values with the ::before pseudo-element. It requires the common CSS setup and the icon's unique Unicode character.

```css
/* Reference individual icons */
.fa-user::before {
  content: "\f007";
}

.fa-cog::before {
  content: "\f013";
}
```

--------------------------------

### Disable Font Awesome Kit Loading in WordPress

Source: https://docs.fontawesome.com/web/use-with/wordpress/advanced-setup

This PHP snippet is used to filter out the default loading of Font Awesome Kits on a WordPress site, typically added to the theme's `functions.php` file. It prevents the plugin from fetching and enqueuing the Kit's stylesheet from the Font Awesome CDN.

```php
add_filter( 'fa_disable_kit_loading', '__return_true' );
```

--------------------------------

### TypeScript Module Augmentation for Font Awesome SVG Core (TypeScript)

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Provides an example of using Module Augmentation in TypeScript to update the type definitions for Font Awesome's `icon()` and `findIconDefinition()` functions. This resolves type errors when using custom icon kits.

```typescript
import { IconDefinition } from "@fortawesome/fontawesome-common-types";

declare module "@fortawesome/fontawesome-svg-core" {
  interface IconProps {
    icon?: IconDefinition;
  }
}

declare module "@fortawesome/free-solid-svg-icons" {
  // You might need to augment specific icon packages if using them directly
}

// Example usage after augmentation:
// import { icon } from "@fortawesome/fontawesome-svg-core";
// import { faCoffee } from "@fortawesome/free-solid-svg-icons";
// const coffeeIcon = icon(faCoffee);

```

--------------------------------

### Labeling Semantic Icons in Content with aria-label (Web Fonts)

Source: https://docs.fontawesome.com/web/dig-deeper/accessibility

When using web font icons semantically within content, provide a text-based alternative using `aria-label` directly on the icon element. Additionally, apply `role="img"` to ensure the icon is treated as an image by assistive technologies, as `aria-label` may not be supported on generic elements.

```html
<i class="fas fa-shopping-cart" role="img" aria-label="Shopping cart status"></i>
```

--------------------------------

### Include Font Awesome CSS and Web Fonts in Project

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

This snippet demonstrates copying the necessary Font Awesome files and folders into a project's static assets directory. It highlights the importance of including the core CSS file and any desired style-specific CSS files.

```bash
cp -r /path/to/fontawesome/css ./your-project/static/css
cp -r /path/to/fontawesome/webfonts ./your-project/static/webfonts
```

--------------------------------

### Font Awesome JS File Names by Style

Source: https://docs.fontawesome.com/web/setup/host-yourself/svg-js

Lists the JavaScript file names for various Font Awesome styles, including Solid, Regular, Light, Thin, Duotone, and Brands. Some files may require a Pro subscription.

```javascript
fontawesome.js
solid.js or solid.min.js (Pro only)
regular.js or regular.min.js (Pro only)
light.js or light.min.js (Pro only)
thin.js or thin.min.js (Pro only)
duotone.js or duotone.min.js (Pro only)
duotone-regular.js or duotone-regular.min.js (Pro only)
duotone-light.js or duotone-light.min.js (Pro only)
duotone-thin.js or duotone-thin.min.js (Pro only)
sharp-solid.js or sharp-solid.min.js (Pro only)
sharp-regular.js or sharp-regular.min.js (Pro only)
sharp-light.js or sharp-light.min.js (Pro only)
sharp-thin.js or sharp-thin.min.js (Pro only)
sharp-duotone-solid.js or sharp-duotone-solid.min.js (Pro only)
sharp-duotone-regular.js or sharp-duotone-regular.min.js (Pro only)
sharp-duotone-light.js or sharp-duotone-light.min.js (Pro only)
sharp-duotone-thin.js or sharp-duotone-thin.min.js (Pro only)
brands.js or brands.min.js
chisel-regular.js or chisel-regular.min.js (Pro+ only)
etch-solid.js or etch-solid.min.js (Pro+ only)
jelly-regular.js or jelly-regular.min.js (Pro+ only)
jelly-fill-regular.js or jelly-fill-regular.min.js (Pro+ only)
jelly-duo-regular.js or jelly-duo-regular.min.js (Pro+ only)
notdog-solid.js or notdog-solid.min.js (Pro+ only)
notdog-duo-solid.js or notdog-duo-solid.min.js (Pro+ only)
slab-regular.js or slab-regular.min.js (Pro+ only)
slab-press-regular.js or slab-press-regular.min.js (Pro+ only)
thumbprint-light.js or thumbprint-light.min.js (Pro+ only)
whiteboard-semibold.js or whiteboard-semibold.min.js (Pro+ only)
```

--------------------------------

### Font Awesome Kit-Based Custom Icons

Source: https://docs.fontawesome.com/web/add-icons/how-to

Explains the usage of custom icons within a Font Awesome Kit, differentiating between standard custom icons and custom duotone icons. These features are exclusive to Pro Kits.

```HTML
<i class="fa-kit"></i> <!-- Custom Icons -->
<i class="fa-kit-duotone"></i> <!-- Custom Duotone Icons -->
```

--------------------------------

### Font Awesome Slab Icon Styles

Source: https://docs.fontawesome.com/web/add-icons/how-to

Demonstrates the usage of Font Awesome's Slab icon style, specifying the class and font-weight. Requires Pro+ subscription for availability.

```HTML
<i class="fa-slab fa-regular"></i> <!-- Regular Slab -->
<i class="fa-slab-press fa-regular"></i> <!-- Press Regular Slab -->
```

--------------------------------

### Resolve Component Explicitly (Vue)

Source: https://docs.fontawesome.com/web/use-with/vue/dig-deeper

Shows how to configure a Vue component to explicitly resolve another component, useful for managing dependencies or custom setups.

```javascript
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";

export default {
  components: {
    FontAwesomeIcon
  },
  data() {
    return {
      icon: faUser
    };
  }
};
```

--------------------------------

### Base64 Encoding Utility for Proxy Authentication

Source: https://docs.fontawesome.com/web/setup/packages

A utility to Base64 encode your package token, which is required for basic authentication when using a proxy with your .npmrc file. Paste your token and click 'Encode'.

```javascript
function base64Encode(str) {
  return btoa(str);
}
```

--------------------------------

### Using Font Awesome Icons in HTML

Source: https://docs.fontawesome.com/web/add-icons/icon-wizard

Demonstrates how to use official Font Awesome icons and custom icons (created via the Icon Wizard and added to a Kit) within an HTML file. It shows the typical structure for referencing icons using the <i> tag and Font Awesome classes.

```html
<i class="fa-solid fa-file"></i>
<i class="fa-kit fa-solid-file-heart"></i>
```

--------------------------------

### Accessing Font Awesome Icons by Prefix and Name (JavaScript)

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Demonstrates how to access Font Awesome icons using the `byPrefixAndName` object, which organizes icons by their prefix and name. This is particularly useful for subsetted Kits.

```javascript
const icon = prefix[iconName];
// Example: Accessing the 'house' icon with 'fas' prefix
const houseIcon = fas["house"];
```

--------------------------------

### Reference Font Awesome CSS in HTML

Source: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

Link the core Font Awesome CSS file and style-specific CSS files within the `<head>` section of your HTML. Ensure the paths correctly point to the location of these files.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome Example</title>
    <!-- Link core Font Awesome CSS -->
    <link rel="stylesheet" href="path/to/your/fontawesome.css">
    <!-- Link specific style CSS (e.g., solid) -->
    <link rel="stylesheet" href="path/to/your/fontawesome.solid.css">
    <style>
        /* Basic styling for demonstration */
        body {
            font-family: sans-serif;
            padding: 20px;
        }
        .icon-container {
            margin-bottom: 15px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Font Awesome Icons</h1>
    <div class="icon-container">
        <!-- Example using a solid icon -->
        <i class="fa-solid fa-star"></i> Star Icon
    </div>
    <div class="icon-container">
        <!-- Example using another solid icon -->
        <i class="fa-solid fa-heart"></i> Heart Icon
    </div>
    <div class="icon-container">
        <!-- Example using a regular icon (if included) -->
        <i class="fa-regular fa-bell"></i> Bell Icon
    </div>
</body>
</html>
```

--------------------------------

### Font Awesome Whiteboard Icon Style

Source: https://docs.fontawesome.com/web/add-icons/how-to

Shows how to implement the Font Awesome Whiteboard icon style, including the necessary classes and font-weight. Availability is limited to Pro+ subscriptions.

```HTML
<i class="fa-whiteboard fa-semibold"></i> <!-- Semibold Whiteboard -->
```

--------------------------------

### Include Font Awesome JS Files in HTML

Source: https://docs.fontawesome.com/web/setup/host-yourself/svg-js

Reference the core Font Awesome JavaScript loader and specific style files in the `<head>` of your HTML document. Ensure the file paths are correct to load the icons.

```html
<head>
  <link rel="stylesheet" href="/path/to/fontawesome.css">
  <link rel="stylesheet" href="/path/to/solid.css">
  <link rel="stylesheet" href="/path/to/brands.css">
  <script defer src="/path/to/fontawesome.js"></script>
  <script defer src="/path/to/solid.js"></script>
  <script defer src="/path/to/brands.js"></script>
</head>
```

--------------------------------

### Import All Free Icons from a Style (JS)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Shows how to import all icons from a specific free style package (e.g., 'free-solid-svg-icons') for easier access without individual imports.

```javascript
import { config } from "@fortawesome/fontawesome-svg-core";
import * as Icons from "@fortawesome/free-solid-svg-icons";

// Configure Font Awesome to use all imported solid icons
config.autoAddCss = false;

// Add all solid icons to the library
Object.keys(Icons).forEach(key => {
  if (!key.includes("Body")) {
    library.add(Icons[key]);
  }
});

// Usage as string
<i className="fas fa-house"></i>

// Usage as array
<FontAwesomeIcon icon={["fas", "fa-house"]} />
```

--------------------------------

### Attaching Events to Font Awesome Icons

Source: https://docs.fontawesome.com/web/use-with/javascript-libraries

Provides an example of how to attach event listeners to Font Awesome icons when using the 'data-fa-i2svg' attribute. This involves selecting an ancestor element and filtering for the icon within the event handler.

```javascript
$('body').on('click', '.fa-dragon', function(e) {
  // Your event handler code here
  console.log('Dragon icon clicked!');
});
```

--------------------------------

### Import Individual Font Awesome Icons (JavaScript)

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Demonstrates how to import individual Font Awesome icons by specifying the icon name and path. This approach is tree-shakable, helping to reduce bundle sizes by only including the icons used.

```javascript
import { faUser } from "@fortawesome/free-solid-svg-icons"; // For solid style
import { faUser as faUserSharpThin } from "@fortawesome/sharp-thin-svg-icons"; // For sharp thin style
```

--------------------------------

### Importing Specific Icons in React (Kit Pkg)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Demonstrates importing individual icons directly for better tree-shaking in React applications using Kit Packages. It's recommended to preserve shorthand prefixes in import names for multi-style icons.

```jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";

function Example() {
  return (
    <FontAwesomeIcon icon={faEnvelope} />
  );
}
```

--------------------------------

### Importing Font Awesome SCSS Core Styles

Source: https://docs.fontawesome.com/web/use-with/scss

Demonstrates how to import the core Font Awesome SCSS files and expose its helpers using Sass's `@forward` rule. This is essential for making Font Awesome's variables, mixins, and functions available in your project.

```scss
@use "../scss/fa-pro-light.scss";
@forward "../scss/fa-pro.scss" as fa-pro-*; // Or fa-light-*, etc.

.some-element {
  font-family: var(--fa-font-solid);
}
```

--------------------------------

### Import Font Awesome Icons by Prefix and Name in Vue

Source: https://docs.fontawesome.com/web/use-with/vue/add-icons

Demonstrates the recommended way to import and use Font Awesome icons in a Vue project by specifying the icon family and style using a shorthand prefix.

```javascript
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";

export default {
  name: "App",
  components: {
    FontAwesomeIcon
  },
  setup() {
    return {
      faUserSecret
    };
  }
};
```

--------------------------------

### Font Awesome Sharp Duotone Styles

Source: https://docs.fontawesome.com/web/dig-deeper/styles

Lists the styles (Solid, Regular, Light, Thin) for Font Awesome's Sharp Duotone icon family, specifying Pro-only access, CSS classes, shorthands, and release versions.

```html
<p>Solid: Pro only - `fa-sharp-duotone fa-solid` (<code>fasds</code>)</p>
<p>Regular: Pro only - `fa-sharp-duotone fa-regular` (<code>fasdr</code>)</p>
<p>Light: Pro only - `fa-sharp-duotone fa-light` (<code>fasdl</code>)</p>
<p>Thin: Pro only - `fa-sharp-duotone fa-thin` (<code>fasdt</code>)</p>
```

--------------------------------

### Labeling Semantic Icons in Content with aria-label (SVG)

Source: https://docs.fontawesome.com/web/dig-deeper/accessibility

For semantic SVG icons used in content, ensure they are visible to assistive technologies by removing or setting `aria-hidden` to `false`. Provide a descriptive `aria-label` directly on the SVG element to convey its meaning to screen readers.

```html
<svg aria-hidden="false" aria-label="Number of unread messages">
  <!-- SVG icon path data for a message bubble -->
</svg>
```

--------------------------------

### Font Awesome Layering Structure (HTML)

Source: https://docs.fontawesome.com/web/style/layer

Demonstrates the basic HTML structure for layering icons, text, and counters using Font Awesome classes. `fa-layers` acts as a wrapper, and inner elements like `fa-layers-text` and `fa-layers-counter` are used for specific layering effects.

```html
<span class="fa-layers fa-fw">
  <i class="fas fa-circle"></i>
  <i class="fas fa-play-circle"></i>
  <span class="fa-layers-text">8</span>
</span>
```

--------------------------------

### Use Font Awesome Icons in Vue with Nuxt (Array)

Source: https://docs.fontawesome.com/web/use-with/vue/use-with

This example demonstrates using Font Awesome icons in a Vue component within a Nuxt project using the array syntax. This approach is suitable for specifying icons that have been imported and added to the Font Awesome library.

```html
<template>
  <div>
    <font-awesome-icon :icon="['fas', 'fa-check-circle']" />
  </div>
</template>
```

--------------------------------

### Importing Whole Styles in React (Kit Pkg)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Shows how to import all icons within a specific style using Kit Packages in React. This method does not support tree-shaking and can lead to larger bundle sizes, so it should be used judiciously.

```jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee, faCamera } from "@fortawesome/free-solid-svg-icons";

function Example() {
  return (
    <>
      <FontAwesomeIcon icon={faCoffee} />
      <FontAwesomeIcon icon={faCamera} />
    </>
  );
}
```

--------------------------------

### Extend Duotone Styling with Sass

Source: https://docs.fontawesome.com/web/dig-deeper/style-switching

This Sass code snippet shows how to extend the styling for Duotone icons using Sass. It involves using the `$css-prefix` variable to ensure compatibility with custom prefixes and applying the `.fa-duotone` styling to the general `.fa` class for proper rendering.

```sass
.fa {
  @extend .#{$prefix}duotone;
}
```

--------------------------------

### Use Font Awesome Icons in Vue with Nuxt (String)

Source: https://docs.fontawesome.com/web/use-with/vue/use-with

This example shows how to use Font Awesome icons in a Vue component within a Nuxt project using the string syntax for specifying icons. This method requires the icon to be imported and added to the Font Awesome library.

```html
<template>
  <div>
    <font-awesome-icon icon="['fas', 'fa-coffee']" />
  </div>
</template>
```

--------------------------------

### Configure npm/pnpm for Font Awesome Pro Access

Source: https://docs.fontawesome.com/web/setup/packages

This snippet shows how to configure npm or pnpm to use the Font Awesome private registry for Pro packages. It requires a valid Pro Package Token and should be placed in a `.npmrc` file in your project's root directory.

```npmrc
//npm.fontawesome.com/:_authToken=${NPM_TOKEN}
@fortawesome:registry=https://npm.fontawesome.com/
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
pnpm config set "@fortawesome:registry" https://npm.fontawesome.com/
```

--------------------------------

### Add Font Awesome Icon to Existing HTML Element via CSS

Source: https://docs.fontawesome.com/web/add-icons/pseudo-elements

This CSS example shows how to add a Font Awesome icon to an existing HTML element (e.g., a delete button with class 'delete' inside a form with ID 'user-settings') using CSS selectors and pseudo-elements.

```css
#user-settings .delete::before {
  content: "\f014"; /* Unicode for trash icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
```

--------------------------------

### Using Font Awesome Library in React (Kit Pkg)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Illustrates using the Font Awesome `Library` class to add all icons from a subsetted Kit package once in React. This allows using icons in templates via shorthand prefix as a string or array, reducing repetitive imports.

```jsx
import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee, faCamera } from "@fortawesome/free-solid-svg-icons";

library.add(faCoffee, faCamera);

// Then in your component:
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// <FontAwesomeIcon icon={["fas", "coffee"]} />
// <FontAwesomeIcon icon="camera" />
```

--------------------------------

### Using Uploaded Icons in HTML - Font Awesome

Source: https://docs.fontawesome.com/web/add-icons/upload-icons

Demonstrates how to reference custom uploaded icons within an HTML project using Font Awesome's Kit system. It shows the specific CSS class prefixes for custom and custom duotone icons.

```html
<i class="fa-kit fa-basketball-hoop-broken"></i>
<i class="fa-kit-duotone fa-basketball-hoop-broken"></i>
```

--------------------------------

### Hiding Decorative SVG Icons with aria-hidden

Source: https://docs.fontawesome.com/web/dig-deeper/accessibility

When using SVG icons for purely decorative purposes, ensure they are hidden from assistive technologies like screen readers by adding the `aria-hidden="true"` attribute. This prevents unnecessary announcements and avoids confusion for users relying on screen readers.

```html
<svg aria-hidden="true">
  <!-- SVG icon path data -->
</svg>
```

--------------------------------

### Import All Pro Icons from a Style (JS)

Source: https://docs.fontawesome.com/web/use-with/react/add-icons

Illustrates importing all icons from a Pro style package (e.g., 'pro-duotone-svg-icons'). This method provides access to all icons within that style but should be used cautiously due to the large number of icons.

```javascript
import { config, library } from "@fortawesome/fontawesome-svg-core";
import * as Icons from "@fortawesome/pro-duotone-svg-icons";

// Configure Font Awesome to use all imported duotone icons
config.autoAddCss = false;

// Add all duotone icons to the library
Object.keys(Icons).forEach(key => {
  if (!key.includes("Body")) {
    library.add(Icons[key]);
  }
});

// Usage as string
<i className="fad fa-house"></i>

// Usage as array
<FontAwesomeIcon icon={["fad", "fa-house"]} />
```

--------------------------------

### Adding Font Awesome Icons via CSS Pseudo-elements

Source: https://docs.fontawesome.com/web/add-icons/how-to

Demonstrates how to add Font Awesome icons using only CSS pseudo-elements, a method suitable for web font integration.

```CSS
.element::before {
  font-family: "Font Awesome 7 Free";
  content: "\f007"; /* Example content */
  font-weight: 900; /* or 400 for regular */
}
```

--------------------------------

### Override Font Awesome Styles with Element-Specific CSS

Source: https://docs.fontawesome.com/web/dig-deeper/style-switching

This CSS example illustrates how to override global Font Awesome styles for specific elements. By defining new values for `--fa-family` or `--fa-style` within a more specific CSS rule, you can apply unique styles to individual icons or groups of icons.

```css
.specific-icon {
  --fa-family: "--fa-family-duotone";
  --fa-style: "900";
}
```

--------------------------------

### Labeling Interactive Elements with aria-label (SVG)

Source: https://docs.fontawesome.com/web/dig-deeper/accessibility

For interactive elements where an SVG icon is the primary visual cue, use the `aria-label` attribute on the interactive element itself (e.g., a button) to describe its function. This ensures screen readers announce the purpose of the interactive control. The SVG icon should be hidden using `aria-hidden="true"`.

```html
<button aria-label="Email us!">
  <svg aria-hidden="true">
    <!-- SVG icon path data for an envelope -->
  </svg>
  Email us!
</button>
```

--------------------------------

### Set up Font Awesome SVG Package Library in Vue

Source: https://docs.fontawesome.com/web/use-with/vue/add-icons

Shows how to configure the Font Awesome SVG package library in the main Vue application file (`main.js` or `main.ts`) by adding specific icons.

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import { faThumbsUp } from "@fortawesome/free-solid-svg-icons";
import { faFacebook } from "@fortawesome/free-brands-svg-icons";

library.add(faUserSecret, faThumbsUp, faFacebook);

const app = createApp(App);

app.component("font-awesome-icon", FontAwesomeIcon);

app.mount("#app");
```

--------------------------------

### Accessing All Icons in a Font Awesome Kit (JavaScript)

Source: https://docs.fontawesome.com/web/dig-deeper/kit-package-api

Shows how to access all icons within a Font Awesome Kit using the `all[]` array. This method is recommended when using custom subsetting and pairing with the SVG Core Library for icon registration and lookup.

```javascript
const allIcons = kit.all;
// Icons in the 'all' array are structured similarly to objects from byPrefixAndName.
```