### Install Font Awesome Component

Source: https://github.com/fortawesome/font-awesome/wiki/Home

Instructions for installing Font Awesome as a component using the component package manager.

```bash
$ component install FortAwesome/Font-Awesome
```

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

### Program Start / Stop Icons with Font Awesome Layers

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Demonstrates how to create visual representations for program start and stop using layered Font Awesome icons. This example uses multiple `fa-minus` and `fa-circle` icons with various transformations to simulate start/stop indicators.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="rotate-45 shrink-5 left-3 down-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-135 shrink-5 right-3 down-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-45 shrink-5 right-3 up-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-135 shrink-5 left-3 up-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-90 shrink-8"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="far fa-circle" data-fa-transform=""></i>
    <i class="fas fa-minus" data-fa-transform="rotate-60 shrink-5 left-2 down-1.65"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-120 shrink-5 right-2 down-1.65"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-180 shrink-4 up-2.65"></i>
</span>
```

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

### Install @fortawesome/free-regular-svg-icons

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/free-regular-svg-icons/README.md

Instructions for installing the @fortawesome/free-regular-svg-icons package using either npm or yarn.

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

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

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

### Install Development Dependencies

Source: https://github.com/fortawesome/font-awesome/wiki/Home

Installs the necessary tools for developing Font Awesome, including Ruby gems and Node.js packages.

```bash
$ bundle install
$ npm install
```

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

### Install @fortawesome/free-brands-svg-icons

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/free-brands-svg-icons/README.md

Instructions for installing the @fortawesome/free-brands-svg-icons package using either npm or yarn package managers.

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

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

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

### Bower Configuration Override

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

Provides an example of how to configure the 'main' property in a bower.json file to include Font Awesome CSS and font files. This is useful when bower's default main file selection doesn't meet project requirements.

```json
{
  "overrides": {
    "font-awesome": {
      "main": [
        "./css/font-awesome.css",
        "./fonts/*"
      ]
    }
  }
}
```

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

### Install @fortawesome/free-solid-svg-icons with npm

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/free-solid-svg-icons/README.md

Installs the @fortawesome/free-solid-svg-icons package using npm. This is a common method for adding front-end libraries to a project.

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

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

### Install @fortawesome/fontawesome-svg-core with yarn

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/fontawesome-svg-core/README.md

Installs the @fortawesome/fontawesome-svg-core package using yarn. This is an alternative package manager for JavaScript projects.

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

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

### Font Awesome Configuration Troubleshooting

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting-npm-installation

This section addresses common issues encountered when configuring Font Awesome packages. It provides solutions and best practices for ensuring a smooth integration into your project.

```APIDOC
Troubleshooting Font Awesome Configuration:

Common Issues:
- Incorrect CDN path: Ensure the Font Awesome CDN link in your HTML is correct and points to the latest version or the version you are using.
- CSS file not loading: Verify that the CSS file is properly linked in the `<head>` section of your HTML document. Check browser developer tools for any 404 errors.
- Icon not displaying: Make sure you are using the correct icon class name (e.g., `fa-solid fa-star`). Check for typos and ensure the icon is available in the version of Font Awesome you have included.
- Conflicts with other CSS: Font Awesome's CSS can sometimes conflict with other stylesheets. Try isolating the issue by temporarily removing other CSS files or using more specific selectors.
- Font file loading issues: If you are self-hosting Font Awesome, ensure the font files (woff, woff2, ttf, svg, eot) are correctly placed and accessible via the CSS paths.

Solutions:
- Use the official CDN links provided on the Font Awesome website for the easiest setup.
- If self-hosting, download the correct package (e.g., Font Awesome Free or Pro) and place the `css` and `webfonts` directories in your project.
- Inspect element in your browser's developer tools to check for CSS loading errors and verify icon class names.
- Consider using CSS variables or more specific selectors to avoid style conflicts.
- For Pro versions, ensure your license key is correctly configured if required by your setup method.

Refer to the official Font Awesome documentation for the most up-to-date troubleshooting steps and detailed guides: https://fontawesome.com/docs/web/setup/packages#_5-troubleshooting-your-configuration
```

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

### Install @fortawesome/fontawesome-svg-core with npm

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/fontawesome-svg-core/README.md

Installs the @fortawesome/fontawesome-svg-core package using npm. This is the standard way to add the package to your project's dependencies.

```bash
$ npm i --save @fortawesome/fontawesome-svg-core
```

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

### FontForge Command-Line Usage for Merging

Source: https://github.com/fortawesome/font-awesome/wiki/Merge-FontAwesome-with-any-other-font

This demonstrates the command-line execution of `sfddiff.sh` to merge two font files. The example shows how to use the script with specific flags to control the merging process, such as ignoring certain font data or specifying an output file for merged results.

```bash
sfddiff.sh FontAwesome.sfd --merge FontAwesome.sfd
```

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

### Install @fortawesome/free-solid-svg-icons with yarn

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/free-solid-svg-icons/README.md

Installs the @fortawesome/free-solid-svg-icons package using yarn. Yarn is an alternative package manager for JavaScript projects.

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

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

### Install Font Awesome 7 with npm

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/fontawesome-free/README.md

Installs the Font Awesome 7 package using npm. This command adds the package as a dependency to your project.

```bash
$ npm i --save @fortawesome/fontawesome-free
```

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

### Install Font Awesome 7 with yarn

Source: https://github.com/fortawesome/font-awesome/blob/7.x/js-packages/@fortawesome/fontawesome-free/README.md

Installs the Font Awesome 7 package using yarn. This command adds the package as a dependency to your project.

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

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

### Voicemail Icon Layer

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Creates a voicemail icon effect by layering two tape icons with transformations to simulate a tape reel. This example uses `fa-flip-horizontal` for one of the icons.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-tape fa-flip-horizontal" data-fa-transform="right-5 shrink-3" ></i>
    <i class="fas fa-tape" data-fa-transform="left-5 shrink-3" ></i>  
</span>
```

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

### Server Configuration for Font Awesome Fonts

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

Provides guidance on server configuration issues when hosting Font Awesome fonts. It covers MIME types, CORS, and cache control headers, particularly for Internet Explorer.

```text
1. Configure server MIME types for font files (e.g., `.woff`, `.ttf`, `.svg`).
2. Ensure Cross-origin Resource Sharing (CORS) is properly configured.
3. For IE: Avoid `no-store` in Cache-control header for font files.
4. For IE and HTTPS: Avoid `no-cache` in Pragma header.
5. For IE: Remove query strings from `@font-face` definitions in custom CSS files.
```

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

### JavaScript Example for Font Awesome File Icons

Source: https://github.com/fortawesome/font-awesome/wiki/Extending-File-Type-icons-to-use-in-programming

This JavaScript code demonstrates how to dynamically apply Font Awesome file type classes based on file extensions. It iterates through elements with a 'data-filetype' attribute and adds corresponding Font Awesome classes.

```javascript
var filetypes = [
    { ext: 'doc', icon: 'fa-file-word-o' },
    { ext: 'docx', icon: 'fa-file-word-o' },
    { ext: 'pdf', icon: 'fa-file-pdf-o' },
    { ext: 'xls', icon: 'fa-file-excel-o' },
    { ext: 'xlsx', icon: 'fa-file-excel-o' },
    { ext: 'ppt', icon: 'fa-file-powerpoint-o' },
    { ext: 'pptx', icon: 'fa-file-powerpoint-o' },
    { ext: 'zip', icon: 'fa-file-archive-o' },
    { ext: 'rar', icon: 'fa-file-archive-o' },
    { ext: 'jpg', icon: 'fa-file-image-o' },
    { ext: 'jpeg', icon: 'fa-file-image-o' },
    { ext: 'png', icon: 'fa-file-image-o' },
    { ext: 'gif', icon: 'fa-file-image-o' },
    { ext: 'txt', icon: 'fa-file-text-o' },
    { ext: 'html', icon: 'fa-file-code-o' },
    { ext: 'css', icon: 'fa-file-code-o' },
    { ext: 'js', icon: 'fa-file-code-o' },
    { ext: 'json', icon: 'fa-file-code-o' },
    { ext: 'xml', icon: 'fa-file-code-o' },
    { ext: 'mp3', icon: 'fa-file-audio-o' },
    { ext: 'wav', icon: 'fa-file-audio-o' },
    { ext: 'mp4', icon: 'fa-file-video-o' },
    { ext: 'avi', icon: 'fa-file-video-o' },
    { ext: 'mov', icon: 'fa-file-video-o' },
    { ext: 'exe', icon: 'fa-file-code-o' },
    { ext: 'dll', icon: 'fa-file-code-o' },
    { ext: 'psd', icon: 'fa-file-image-o' },
    { ext: 'ai', icon: 'fa-file-image-o' },
    { ext: 'eps', icon: 'fa-file-image-o' },
    { ext: 'svg', icon: 'fa-file-image-o' },
    { ext: 'ttf', icon: 'fa-file-font-o' },
    { ext: 'otf', icon: 'fa-file-font-o' },
    { ext: 'woff', icon: 'fa-file-font-o' },
    { ext: 'woff2', icon: 'fa-file-font-o' },
    { ext: 'eot', icon: 'fa-file-font-o' },
    { ext: 'otf', icon: 'fa-file-font-o' },
    { ext: 'zip', icon: 'fa-file-archive-o' },
    { ext: 'tar', icon: 'fa-file-archive-o' },
    { ext: 'gz', icon: 'fa-file-archive-o' },
    { ext: '7z', icon: 'fa-file-archive-o' },
    { ext: 'iso', icon: 'fa-file-image-o' },
    { ext: 'dmg', icon: 'fa-file-image-o' },
    { ext: 'apk', icon: 'fa-file-code-o' },
    { ext: 'ipa', icon: 'fa-file-code-o' },
    { ext: 'jar', icon: 'fa-file-code-o' },
    { ext: 'class', icon: 'fa-file-code-o' },
    { ext: 'java', icon: 'fa-file-code-o' },
    { ext: 'py', icon: 'fa-file-code-o' },
    { ext: 'rb', icon: 'fa-file-code-o' },
    { ext: 'php', icon: 'fa-file-code-o' },
    { ext: 'pl', icon: 'fa-file-code-o' },
    { ext: 'sh', icon: 'fa-file-code-o' },
    { ext: 'bat', icon: 'fa-file-code-o' },
    { ext: 'sql', icon: 'fa-file-code-o' },
    { ext: 'yml', icon: 'fa-file-code-o' },
    { ext: 'yaml', icon: 'fa-file-code-o' },
    { ext: 'ini', icon: 'fa-file-code-o' },
    { ext: 'cfg', icon: 'fa-file-code-o' },
    { ext: 'log', icon: 'fa-file-text-o' },
    { ext: 'csv', icon: 'fa-file-excel-o' },
    { ext: 'rtf', icon: 'fa-file-word-o' },
    { ext: 'odt', icon: 'fa-file-word-o' },
    { ext: 'ods', icon: 'fa-file-excel-o' },
    { ext: 'odp', icon: 'fa-file-powerpoint-o' },
    { ext: 'odg', icon: 'fa-file-image-o' },
    { ext: 'odf', icon: 'fa-file-code-o' },
    { ext: 'odb', icon: 'fa-file-code-o' },
    { ext: 'odm', icon: 'fa-file-code-o' },
    { ext: 'odp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ods', icon: 'fa-file-excel-o' },
    { ext: 'odt', icon: 'fa-file-word-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ots', icon: 'fa-file-excel-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otc', icon: 'fa-file-code-o' },
    { ext: 'otf', icon: 'fa-file-font-o' },
    { ext: 'oti', icon: 'fa-file-image-o' },
    { ext: 'otm', icon: 'fa-file-code-o' },
    { ext: 'otp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ots', icon: 'fa-file-excel-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otz', icon: 'fa-file-archive-o' },
    { ext: 'pages', icon: 'fa-file-word-o' },
    { ext: 'numbers', icon: 'fa-file-excel-o' },
    { ext: 'key', icon: 'fa-file-powerpoint-o' },
    { ext: 'sketch', icon: 'fa-file-image-o' },
    { ext: 'fig', icon: 'fa-file-image-o' },
    { ext: 'xd', icon: 'fa-file-image-o' },
    { ext: 'psd', icon: 'fa-file-image-o' },
    { ext: 'ai', icon: 'fa-file-image-o' },
    { ext: 'eps', icon: 'fa-file-image-o' },
    { ext: 'svg', icon: 'fa-file-image-o' },
    { ext: 'ttf', icon: 'fa-file-font-o' },
    { ext: 'otf', icon: 'fa-file-font-o' },
    { ext: 'woff', icon: 'fa-file-font-o' },
    { ext: 'woff2', icon: 'fa-file-font-o' },
    { ext: 'eot', icon: 'fa-file-font-o' },
    { ext: 'zip', icon: 'fa-file-archive-o' },
    { ext: 'tar', icon: 'fa-file-archive-o' },
    { ext: 'gz', icon: 'fa-file-archive-o' },
    { ext: '7z', icon: 'fa-file-archive-o' },
    { ext: 'iso', icon: 'fa-file-image-o' },
    { ext: 'dmg', icon: 'fa-file-image-o' },
    { ext: 'apk', icon: 'fa-file-code-o' },
    { ext: 'ipa', icon: 'fa-file-code-o' },
    { ext: 'jar', icon: 'fa-file-code-o' },
    { ext: 'class', icon: 'fa-file-code-o' },
    { ext: 'java', icon: 'fa-file-code-o' },
    { ext: 'py', icon: 'fa-file-code-o' },
    { ext: 'rb', icon: 'fa-file-code-o' },
    { ext: 'php', icon: 'fa-file-code-o' },
    { ext: 'pl', icon: 'fa-file-code-o' },
    { ext: 'sh', icon: 'fa-file-code-o' },
    { ext: 'bat', icon: 'fa-file-code-o' },
    { ext: 'sql', icon: 'fa-file-code-o' },
    { ext: 'yml', icon: 'fa-file-code-o' },
    { ext: 'yaml', icon: 'fa-file-code-o' },
    { ext: 'ini', icon: 'fa-file-code-o' },
    { ext: 'cfg', icon: 'fa-file-code-o' },
    { ext: 'log', icon: 'fa-file-text-o' },
    { ext: 'csv', icon: 'fa-file-excel-o' },
    { ext: 'rtf', icon: 'fa-file-word-o' },
    { ext: 'odt', icon: 'fa-file-word-o' },
    { ext: 'ods', icon: 'fa-file-excel-o' },
    { ext: 'odp', icon: 'fa-file-powerpoint-o' },
    { ext: 'odg', icon: 'fa-file-image-o' },
    { ext: 'odf', icon: 'fa-file-code-o' },
    { ext: 'odb', icon: 'fa-file-code-o' },
    { ext: 'odm', icon: 'fa-file-code-o' },
    { ext: 'odp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ods', icon: 'fa-file-excel-o' },
    { ext: 'odt', icon: 'fa-file-word-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ots', icon: 'fa-file-excel-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otc', icon: 'fa-file-code-o' },
    { ext: 'otf', icon: 'fa-file-font-o' },
    { ext: 'oti', icon: 'fa-file-image-o' },
    { ext: 'otm', icon: 'fa-file-code-o' },
    { ext: 'otp', icon: 'fa-file-powerpoint-o' },
    { ext: 'ots', icon: 'fa-file-excel-o' },
    { ext: 'ott', icon: 'fa-file-word-o' },
    { ext: 'otz', icon: 'fa-file-archive-o' },
    { ext: 'pages', icon: 'fa-file-word-o' },
    { ext: 'numbers', icon: 'fa-file-excel-o' },
    { ext: 'key', icon: 'fa-file-powerpoint-o' },
    { ext: 'sketch', icon: 'fa-file-image-o' },
    { ext: 'fig', icon: 'fa-file-image-o' },
    { ext: 'xd', icon: 'fa-file-image-o' }
];

$("[data-filetype]").each(function() {
    var filetype = $(this).attr('data-filetype');
    var icon = 'fa-file-o'; // Default icon
    for (var i = 0; i < filetypes.length; i++) {
        if (filetypes[i].ext === filetype) {
            icon = filetypes[i].icon;
            break;
        }
    }
    $(this).addClass(icon);
});
```

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

### Font Awesome Icon Sizing Updates

Source: https://github.com/fortawesome/font-awesome/wiki/Upgrading-from-3.2.1-to-4

This section illustrates the evolution of Font Awesome's icon sizing classes. The previous set of 'icon-2x' through 'icon-4x' has been replaced by a more comprehensive set, 'fa-2x' through 'fa-5x', offering greater flexibility in icon scaling.

```html
/* Replaced */
.icon-2x, .icon-3x, .icon-4x {
  /* Replaced with */
  .fa-2x, .fa-3x, .fa-4x, .fa-5x
}
```

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

### Fixing Protocol Relative URLs for Local Development

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

Addresses the issue where Font Awesome icons from a CDN do not display when developing a web app locally using `file://` protocol. It suggests adding `https:` to protocol-relative URLs.

```html
<!-- Original (problematic) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Corrected for local development -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
```

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

### Display Custom Icon with all.js (HTML)

Source: https://github.com/fortawesome/font-awesome/wiki/Customize-Font-Awesome

Shows the HTML structure to display a custom Font Awesome icon added via the all.js library. The icon is rendered using a span element with specific classes corresponding to the custom icon's prefix and name.

```html
<span class="fac fa-list-old-style"></span>
```

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

### Save Icon Set Variations with Font Awesome Layers and Masks

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Provides examples of creating a 'save' icon with different overlaying symbols (times, check, down arrow, up arrow) using Font Awesome's layering and masking features. This allows for dynamic representation of save states or actions.

```html
<i class="fas fa-save fa-fw"></i>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-times" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-check" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-arrow-down" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-arrow-up" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>
```

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

### Troubleshooting Font Awesome Display Issues

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This section covers general troubleshooting steps for Font Awesome icons not displaying correctly. It includes checks for outdated versions, correct file serving (CSS/JS and fonts), CDN links, HTML validity, plugin conflicts, browser extensions, and operating system settings.

```text
1. Ensure no old versions of Font Awesome are installed or prioritized.
2. If self-hosting: Verify `font-awesome.js` (SVG) or `font-awesome.css` and `/fonts` folder (CSS) are up-to-date.
3. If using CDN: Confirm the CDN link is current.
4. Use valid HTML5 templates and validate with W3C Markup Validator.
5. Avoid plugins/extensions loading older Font Awesome versions.
6. Prevent JavaScript/CSS libraries from overriding icon styles.
7. Check browser extensions (e.g., NoScript, AdBlockPlus) are not blocking webfonts or JavaScript.
8. [CSS Only] Verify proper font file loading in the browser's development console.
9. [CSS Only] Ensure the OS is not blocking webfonts (e.g., via Microsoft Group Policy).
```

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

### TTF/OTF Font Embedding with ttembed-js (Node.js)

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This Node.js code snippet demonstrates how to use the ttembed-js module programmatically to change the fsType flag of TTF/OTF font files to '0000' (Installable Embedding mode).

```javascript
var callback = function(error, oldFsType) {
    if (error) {
        console.error('Something went wrong.', error);
        return;
    }
    if (oldFsType === '0000') {
        console.log('fsType is already 0000; no action taken.');
    } else {
        console.log('fsType successfully changed from ' + oldFsType + ' to 0000.');
    }
}
var ttembed = require('ttembed-js');
ttembed({filename: './path/to/fontawesome-webfont.ttf'}, callback);
ttembed({filename: './path/to/FontAwesome.otf'}, callback);
```

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

### Serve Font Awesome Locally

Source: https://github.com/fortawesome/font-awesome/wiki/Home

Serves the Font Awesome project and documentation on a local server for development and testing.

```bash
$ bundle exec jekyll -w serve
```

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

### TTF/OTF Font Embedding with ttembed-js (CLI)

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This command-line interface usage of the ttembed-js npm module modifies TTF/OTF font files to set the fsType flag to '0000' (Installable Embedding mode), which is necessary for some older browsers like Internet Explorer.

```bash
npm install -g ttembed-js
ttembed-js path/to/fontawesome-webfont.ttf
ttembed-js path/to/FontAwesome.otf
```

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

### Build Font Awesome Project

Source: https://github.com/fortawesome/font-awesome/wiki/Home

Builds the Font Awesome project and its documentation using Jekyll.

```bash
$ bundle exec jekyll build
```

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

### Font Awesome Versioning Strategy

Source: https://github.com/fortawesome/font-awesome/blob/7.x/README.md

Details the versioning strategy for Font Awesome, deviating from standard SemVer due to its nature as an umbrella release. It outlines how major, minor, and patch versions are handled, including backward compatibility considerations.

```Markdown
Font Awesome will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered
with the following format:

`<major>.<minor>.<patch>`

For more information on SemVer, please visit https://semver.org.

**The major version "7" is part of an umbrella release.  It includes many different types of files and technologies. Therefore
we deviate from normal SemVer in the following ways:**

* Any release may update the design, look-and-feel, or branding of an existing
  icon
* We will never intentionally release a `patch` version update that breaks
  backward compatibility
* A `minor` release **may include backward-incompatible changes** but we will
  write clear upgrading instructions in UPGRADING.md
* A `minor` or `patch` release will never remove icons
* Bug fixes will be addressed as `patch` releases unless they include backward
  incompatibility then they will be `minor` releases
```

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

### Font Awesome Licensing

Source: https://github.com/fortawesome/font-awesome/blob/7.x/README.md

Outlines the licensing for Font Awesome Free, specifying the licenses for icons, fonts, and code. It also details attribution requirements.

```Markdown
Font Awesome Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.

- Icons — CC BY 4.0 License
  - In the Font Awesome Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.
- Fonts — SIL OFL 1.1 License
  - In the Font Awesome Free download, the SIL OLF license applies to all icons packaged as web and desktop font files.
- Code — MIT License
  - In the Font Awesome Free download, the MIT license applies to all non-font and non-icon files.

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font
Awesome Free files already contain embedded comments with sufficient
attribution, so you shouldn't need to do anything additional when using these
files normally.

We've kept attribution comments terse, so we ask that you do not actively work
to remove them from files, especially code. They're a great way for folks to
learn about Font Awesome.
```

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

### IE8 HTML5 Shiv Script

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This conditional comment includes the html5shiv.min.js script for Internet Explorer 8 and below, enabling support for HTML5 elements. It should be placed within the `<head>` section.

```html
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
```

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

### Bed in House (Free)

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Demonstrates layering a bed icon within a house structure using Font Awesome's free icons. Requires Font Awesome 5.1.0 or later.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-square-full" data-fa-mask="fas fa-warehouse" data-fa-transform="down-5"></i>
    <i class="fas fa-bed" data-fa-transform="shrink-6 down-2" ></i>
</span>
```

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

### Brand Icons Missing Due to Ad Blockers

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

Explains that some brand icons might be missing if users have Adblock Plus enabled with the 'Remove Social Media Buttons' option activated.

```text
Users with Adblock Plus and 'Remove Social Media Buttons' enabled may not see certain brand icons.
```

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

### Reveal.js Font Awesome Stylesheet

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This CSS snippet is required for Font Awesome icons to display correctly within Reveal.js presentations. It sets the correct font-family for elements with the 'fa' class.

```css
.reveal .fa {
  font-family: 'FontAwesome';
  font-style: normal;
}
```

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

### Bower JSON Overrides for Font Awesome

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

Demonstrates how to configure `bower.json` to include Font Awesome's CSS and font files using the `overrides` property, as per Bower's specifications.

```json
{
  "overrides": {
    "font-awesome": {
      "main": [
        "./css/font-awesome.css",
        "./fonts/*"
      ]
    }
  }
}
```

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

### Info Icon Variations

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Presents three different ways to create an 'info' icon using Font Awesome's layering and stacking features. Requires Font Awesome 5.0.0 or later.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-3" style="font-weight:900; font-style: italic">i</span>
</span>

<span class="fa-layers fa-fw">
    <i class="far fa-circle"></i>
    <i class="fas fa-info" data-fa-transform="shrink-6"></i>
</span>

<span class="fa-stack">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-info fa-stack-1x"></i>
</span>
```

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

### File Sharing

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Demonstrates masking a file icon with a sharing icon using Font Awesome's layering. Requires Font Awesome 5.0.0 or later.

```html
<i class="fas fa-share-alt fa-fw" data-fa-mask="fas fa-file" data-fa-transform="shrink-7 down-2.5"></i>
```

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

### Display Custom Icon with Webpack (HTML)

Source: https://github.com/fortawesome/font-awesome/wiki/Customize-Font-Awesome

Illustrates the HTML markup for rendering a custom Font Awesome icon when using the Webpack integration. A span element with appropriate classes is used to display the icon.

```html
<span class="fas fa-my-custom-icon"></span>
```

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

### Font Awesome Class Renaming

Source: https://github.com/fortawesome/font-awesome/wiki/Upgrading-from-3.2.1-to-4

This snippet shows the direct mapping of older Font Awesome CSS classes to their newer equivalents. These changes are primarily for consistency and to align with the Font Awesome naming conventions.

```html
/* Old class */
.icon-white { 
  /* New class */
  .fa-inverse
}

/* Old class */
.icon-large {
  /* New class */
  .fa-lg
}
```

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

### Wordpress Stack Icon BR Tag Fix

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This CSS rule prevents Wordpress from adding a `<br>` tag that can break icon stacks by setting the display property of `<br>` tags within `.fa-stack` to 'none'.

```css
.fa-stack br {
  display: none
}
```

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

### File with Lightbulb

Source: https://github.com/fortawesome/font-awesome/wiki/Layering-and-Masking-snippets

Layers a file icon within a circle and overlays a lightbulb icon. Requires Font Awesome 5.3.0 or later.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-mask="fas fa-file" data-fa-transform="shrink-3 down-2.5 left-4.5"></i>
    <i class="fas fa-lightbulb" data-fa-transform="shrink-1 down-5 left-5"></i>
</span>
```

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

### Internet Explorer Compatibility Mode Meta Tag

Source: https://github.com/fortawesome/font-awesome/wiki/Troubleshooting

This HTML meta tag is used to ensure proper rendering in Internet Explorer by setting the compatibility mode. It should be placed as the first tag in the `<head>` section of your HTML document.

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```