Font Awesome

https://github.com/fortawesome/font-awesome
Admin
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers,...
Tokens:26,177
Snippets:164
Trust Score:8.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install with npm

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

Installs the @fortawesome/free-brands-svg-icons package using npm.

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

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

### Install with yarn

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

Installs the @fortawesome/free-brands-svg-icons package using yarn.

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

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

### Install with Yarn

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

Install the @fortawesome/fontawesome-svg-core package using Yarn.

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

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

### Install with npm

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

Install the @fortawesome/fontawesome-svg-core package using npm.

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

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

### Install with npm

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

Install the free solid SVG icons package using npm.

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

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

### Install with yarn

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

Install the free solid SVG icons package using yarn.

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

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

### Install with Yarn

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

Install the Font Awesome 7 package using Yarn as an alternative to npm.

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

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

### Install with npm

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

Use this command to install the free regular SVG icons package via npm.

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

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

### Install with yarn

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

Use this command to install the free regular SVG icons package via yarn.

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

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

### Install ttembed-js via npm

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

Install the ttembed-js npm module globally and run it on your font files to set the fsType flag to 0000, enabling Installable Embedding mode for IE9+.

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

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

### Install with npm

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

Install the Font Awesome 7 package using npm. The --save flag adds it to your package.json dependencies.

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

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

### Program Start / Stop - Layering with rotations

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

Two fa-layers spans creating start and stop symbols using rotated minus icons. The first uses rotate-45, rotate-135, and rotate-90; the second uses a circle and rotated minus icons with shrink and positioning.

```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>
```

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

### PHP array for FontAwesome Icon Picker

Source: https://github.com/fortawesome/font-awesome/wiki/Font-Awesome-HTML-Dropdown-Select-List

Example array format for populating a select with Font Awesome icons using the data-content attribute, as used by the FontAwesome Icon Picker plugin.

```php
$x = array(
'fa-arrows-v' => array('data-content' => "<i class='fa fa-arrows-v'></i>", 'value' => 'fa-arrows-v', 'name' => 'fa-arrows-v'),
'fa-beer' => array('data-content' => "<i class='fa fa-beer'></i>", 'value' => 'fa-beer', 'name' => 'fa-beer'),
);
```

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

### Info - HTML

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

Three different ways to create an info icon: using fa-layers with text, fa-layers with an icon, and fa-stack. Requires Font Awesome 5.0.0 free and the SVG & JS framework. The fa-layers elements are combined with fa-fw.

```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>
```

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

### Use Original ttembed from Source

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

Clone, build, and run the original ttembed utility to set the fsType flag on font files. This is an alternative to the npm module.

```bash
git clone https://github.com/hisdeedsaredust/ttembed.git
cd ttembed
make
./ttembed path/to/fontawesome-webfont.ttf path/to/FontAwesome.otf
```

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

### Phone on square - Layering and masking

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

Two approaches to place a phone icon on a square: one uses fa-layers with a square and a mobile-alt icon, the other uses data-fa-mask on the mobile icon with a square mask. Both use shrink transforms.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-square"></i>
    <i class="fas fa-mobile-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>

<i class="fas fa-mobile-alt fa-fw" data-fa-mask="fas fa-square" data-fa-transform="shrink-6"></i>
```

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

### Insert Above / Below - Layering with transforms

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

Four separate fa-layers spans showing how to position icons above or below a central reply icon using data-fa-transform values like shrink, up, down, left, right, and flip. Each span demonstrates a different arrangement (right/left, flip-h, flip-v).

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 right-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 up-1 left-6 flip-h"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-2 right-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 right-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 right-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 down-1 left-6 flip-v flip-h"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-2 right-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 right-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 left-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 up-1 right-6"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-2 left-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 left-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 left-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 down-1 right-6 flip-v"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-2 left-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 left-4"></i>
</span>
```

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

### Bed in house (free) - HTML

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

Layers a bed icon over a warehouse mask using free icons. Requires Font Awesome 5.1.0 free and the SVG & JS framework. The fa-layers element is combined with fa-fw.

```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>
```

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

### File with lightbulb - HTML

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

Layers a lightbulb icon over a file mask. Requires Font Awesome 5.3.0 free and the SVG & JS framework. The fa-layers element is combined with fa-fw.

```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>
```

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

### File sharing - HTML

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

Uses a single icon with a mask to create a file sharing effect. Requires Font Awesome 5.0.0 free and the SVG & JS framework. The icon has the fa-fw class.

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

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

### Add custom icon with local/CDN fontawesome/all.js (JavaScript)

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

Defines a custom icon object with prefix 'fac' and iconName 'list-old-style', then adds it to the FontAwesome library. Replace the viewbox numbers, unicode point, and SVG path with your own. Pseudoelements will not work with this method.

```JavaScript
// replace 1568, 1568 with your SVG viewbox
// e001 is the unicode point which represents this custom icon. Increment this value for other icons
// replace 'M256...' with your single-path SVG
var faListOldStyle = {
  prefix: 'fac',
  iconName: 'list-old-style',
  icon: [1568, 1568, [], 'e001', 'M256 1312v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm-1536-1152v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5z']
}

FontAwesome.library.add(
  faListOldStyle
)
```

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

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

### Import IconName from @fortawesome/fontawesome-svg-core

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

Recommended way to import the IconName type in a TypeScript file (your.ts). All types from this package are re-exported to the main fontawesome package, so import from @fortawesome/fontawesome-svg-core instead of this package.

```typescript
import {
  IconName
} from `@fortawesome/fontawesome-svg-core`

const myIcon: IconName = "..."
```

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

### Window search

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

Layers a search icon over a window maximize icon using masking. The search icon is shrunk and positioned to the bottom-right of the window.

```html
<span class="fa-layers fa-fw">
   <i class="fas fa-circle" data-fa-transform="shrink-6 down-5 right-6" data-fa-mask="far fa-window-maximize"></i>
   <i class="fas fa-search" data-fa-transform="shrink-8 down-5 right-6"></i>
</span>
```

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

### bower.json overrides for font-awesome main files

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

Add this overrides block to your bower.json to include the CSS and font files in the main property. This is necessary because the default bower.json does not include them per bower's specs.

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

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

### Add custom icon with Webpack (JavaScript)

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

Imports library and dom from @fortawesome/fontawesome-svg-core, defines a custom icon with prefix 'fas' and iconName 'list-old-style', adds it to the library, and calls dom.watch(). Replace the viewbox, unicode point, and SVG path. Note: instructions differ for TypeScript.

```JavaScript
import { library, dom } from '@fortawesome/fontawesome-svg-core'

// replace 1568, 1568 with your SVG viewbox
// e001 is the unicode point which represents this custom icon. Increment this value for other icons
// replace 'M256...' with your single-path SVG
var faListOldStyle = {
  prefix: 'fas',
  iconName: 'list-old-style',
  icon: [1568, 1568, [], 'e001', 'M256 1312v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm-1536-1152v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5z']
}

library.add(
  faListOldStyle
)

dom.watch()
```

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

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

### Bed in house (pro) - HTML

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

Layers a bed icon over a warehouse mask using pro icons. Requires Font Awesome 5.1.0 pro and the SVG & JS framework. The fa-layers element is combined with fa-fw.

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

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

### Voicemail

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

Creates a voicemail icon by layering two tape icons, one flipped horizontally and positioned to the right, the other to the left.

```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>
```

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

### sfddiff script for merging fonts

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

This is the complete sfddiff script from FontForge, used to compare two fonts and optionally merge differences into the background of glyphs. It supports flags like --ignorehints, --ignorenames, --ignoregpos, --ignoregsub, --ignorebitmaps, --exact, --warn, and --merge. The script requires FontForge version 20060330 or later and is invoked with two font files.

```fontforge
#!/usr/local/bin/fontforge
#This is the sfddiff script which compares two fonts

if ( Strtol($version) < 20060330 )
  Error( "Please upgrade to a more recent version of fontforge" )
endif

flags=0x789
outfile=""

while ( $argc > 1 && Strsub($1,0,1)=="-" )
  temp = $1
  if ( Strsub(temp,1,2)=='-' )
    temp = Strsub(temp,1)
  endif

  if ( temp=="-ignorehints" )
    flags = flags & ~0x8
  elseif ( temp=="-ignorenames" )
    flags = flags & ~0x100
  elseif ( temp=="-ignoregpos" )
    flags = flags & ~0x200
  elseif ( temp=="-ignoregsub" )
    flags = flags & ~0x400
  elseif ( temp=="-ignorebitmaps" )
    flags = flags & ~0x80
  elseif ( temp=="-exact" )
    flags = flags | 0x2
  elseif ( temp=="-warn" )
    flags = flags | 0x44
  elseif ( temp=="-merge" )
    flags = flags | 0x1800
    shift
    outfile = $1
  elseif ( temp=="-help" )
    Print( "sfddiff: [--version] [--help] [--usage] [--ignorehints] [--ignorenames] [--ignoregpos] [--ignoregsup] [--ignorebitmaps] [--warn] [--exact] fontfile1 fontfile2" )
    Print( " Compares two fontfiles" )
    Print( " --ignorehints: Do not compare postscript hints or truetype instructions" )
    Print( " --ignorenames: Do not compare font names" )
    Print( " --ignoregpos:  Do not compare kerning, etc." )
    Print( " --ignoregsub:  Do not compare ligatures, etc." )
    Print( " --ignorebitmaps: Do not compare bitmap strikes" )
    Print( " --exact:       Normally sfddiff will match contours which are not exact" )
    Print( "                but where the differences are slight (so you could compare" )
    Print( "                truetype and postscript and get reasonable answers). Also" )
    Print( "                normally sfddiff will unlink references before it compares" )
    Print( "                (so you can compare a postscript font (with no references)" )
    Print( "                to the original source (which does have references)). Setting")
    Print( "                this flag means glyphs must match exactly." )
    Print( " --warn:        Provides a warning when an exact match is not found" )
    Print( " --merge outfile: Put any outline differences in the backgrounds of" )
    Print( "                appropriate glyphs" )
return(0)
  elseif ( temp=="-version" )
    Print( "Version 1.0" )
return(0)
  else
break
  endif
  shift
endloop

if ( $argc!=3 || $1=="--usage" || $1=="-usage" )
  Print( "sfddiff: [--version] [--help] [--usage] [--ignorehints] [--ignorenames] [--ignoregpos] [--ignoregsup] [--ignorebitmaps] [--warn] [--exact] [--merge outfile] fontfile1 fontfile2" )
return(0)
endif

Open($2)
Open($1)
CompareFonts($2,"-",flags)
if ( outfile!="" )
  Save(outfile)
endif
```

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

### HTML markup for icon placement in input with feedback

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

Use this markup to place a Font Awesome icon inside an input with feedback. The icon is wrapped in a span with class form-control-feedback, and the parent div uses form-group has-feedback.

```html
<div class="form-group has-feedback">
  <label class="control-label">Font Awesome</label>
  <input type="text" class="form-control">
  <span class="form-control-feedback">
    <i class="fa fa-search"></i>
  </span>
</div>
```

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

### User with pencil

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

Layers a pencil icon over a user icon using masking. The pencil is shrunk and positioned to the bottom-right, with a second pencil icon for emphasis.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-8 down-6 right-6" data-fa-mask="fas fa-user"></i>
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-9 down-6 right-6"></i>
</span>
```

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

### Search with plus

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

Layers a plus icon on top of a search icon using Font Awesome's fa-layers and data-fa-transform. The plus is shrunk and positioned to the bottom-right of the search icon.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-search"></i>
    <i class="fas fa-plus" data-fa-transform="shrink-6 down-2 right-10"></i>
</span>
```

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

### Save icon set - Masking with save icon

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

A set of five save icon variations: a plain save icon, and four layered icons using a circle masked with save and an overlay icon (times, check, arrow-down, arrow-up). Each uses shrink and positioning transforms.

```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>
```

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

### HTML select with Font Awesome icon options

Source: https://github.com/fortawesome/font-awesome/wiki/Font-Awesome-HTML-Dropdown-Select-List

A complete HTML select element with optgroup and many option elements, each using icon- prefixed values. This is the deprecated approach for displaying Font Awesome icons in a dropdown.

```html
<select class="btn btn-sieltec-primary">
  <optgroup label="Web Application Icons">
    <option value="icon-adjust">icon-adjust</option>
    <option value="icon-asterisk">icon-asterisk</option>
    <option value="icon-ban-circle">icon-ban-circle</option>
    <option value="icon-bar-chart">icon-bar-chart</option>
    <option value="icon-barcode">icon-barcode</option>
    <option value="icon-beaker">icon-beaker</option>
    <option value="icon-beer">icon-beer</option>
    <option value="icon-bell">icon-bell</option>
    <option value="icon-bell-alt">icon-bell-alt</option>
    <option value="icon-bolt">icon-bolt</option>
    <option value="icon-book">icon-book</option>
    <option value="icon-bookmark">icon-bookmark</option>
    <option value="icon-bookmark-empty">icon-bookmark-empty</option>
    <option value="icon-briefcase">icon-briefcase</option>
    <option value="icon-bullhorn">icon-bullhorn</option>
    <option value="icon-calendar">icon-calendar</option>
    <option value="icon-camera">icon-camera</option>
    <option value="icon-camera-retro">icon-camera-retro</option>
    <option value="icon-certificate">icon-certificate</option>
    <option value="icon-check">icon-check</option>
    <option value="icon-check-empty">icon-check-empty</option>
    <option value="icon-circle">icon-circle</option>
    <option value="icon-circle-blank">icon-circle-blank</option>
    <option value="icon-cloud">icon-cloud</option>
    <option value="icon-cloud-download">icon-cloud-download</option>
    <option value="icon-cloud-upload">icon-cloud-upload</option>
    <option value="icon-coffee">icon-coffee</option>
    <option value="icon-cog">icon-cog</option>
    <option value="icon-cogs">icon-cogs</option>
    <option value="icon-comment">icon-comment</option>
    <option value="icon-comment-alt">icon-comment-alt</option>
    <option value="icon-comments">icon-comments</option>
    <option value="icon-comments-alt">icon-comments-alt</option>
    <option value="icon-credit-card">icon-credit-card</option>
    <option value="icon-dashboard">icon-dashboard</option>
    <option value="icon-desktop">icon-desktop</option>
    <option value="icon-download">icon-download</option>
    <option value="icon-download-alt">icon-download-alt</option>
    <option value="icon-edit">icon-edit</option>
    <option value="icon-envelope">icon-envelope</option>
    <option value="icon-envelope-alt">icon-envelope-alt</option>
    <option value="icon-exchange">icon-exchange</option>
    <option value="icon-exclamation-sign">icon-exclamation-sign</option>
    <option value="icon-external-link">icon-external-link</option>
    <option value="icon-eye-close">icon-eye-close</option>
    <option value="icon-eye-open">icon-eye-open</option>
    <option value="icon-facetime-video">icon-facetime-video</option>
    <option value="icon-fighter-jet">icon-fighter-jet</option>
    <option value="icon-film">icon-film</option>
    <option value="icon-filter">icon-filter</option>
    <option value="icon-fire">icon-fire</option>
    <option value="icon-flag">icon-flag</option>
    <option value="icon-folder-close">icon-folder-close</option>
    <option value="icon-folder-open">icon-folder-open</option>
    <option value="icon-folder-close-alt">icon-folder-close-alt</option>
    <option value="icon-folder-open-alt">icon-folder-open-alt</option>
    <option value="icon-food">icon-food</option>
    <option value="icon-gift">icon-gift</option>
    <option value="icon-glass">icon-glass</option>
    <option value="icon-globe">icon-globe</option>
    <option value="icon-group">icon-group</option>
    <option value="icon-hdd">icon-hdd</option>
    <option value="icon-headphones">icon-headphones</option>
    <option value="icon-heart">icon-heart</option>
    <option value="icon-heart-empty">icon-heart-empty</option>
    <option value="icon-home">icon-home</option>
    <option value="icon-inbox">icon-inbox</option>
    <option value="icon-info-sign">icon-info-sign</option>
    <option value="icon-key">icon-key</option>
    <option value="icon-leaf">icon-leaf</option>
    <option value="icon-laptop">icon-laptop</option>
    <option value="icon-legal">icon-legal</option>
    <option value="icon-lemon">icon-lemon</option>
    <option value="icon-lightbulb">icon-lightbulb</option>
    <option value="icon-lock">icon-lock</option>
```

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

### Marker with plus - Masking and transform

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

Uses data-fa-mask to mask a circle with a map-marker icon, then adds a plus icon on top with a transform. The mask and plus are positioned together using shrink, down, and right values.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-mask="fas fa-map-marker-alt" data-fa-transform="shrink-5 down-4 right-5"></i>
    <i class="fas fa-plus" data-fa-transform="shrink-7 down-4 right-5"></i>
</span>
```

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

### Space shuttle launch

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

Combines a gripfire icon and a space shuttle icon to create a launch effect. The gripfire is rotated and positioned below the shuttle, with a tomato color.

```html
<span class="fa-layers fa-fw">
    <i class="fab fa-gripfire" data-fa-transform="down-4 shrink-8 rotate-180" style="color: tomato;"></i>
    <i class="fas fa-space-shuttle" data-fa-transform="up-3 shrink-8 rotate-270" ></i>
</span>
```

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

### HTML dropdown select list of Font Awesome icons

Source: https://github.com/fortawesome/font-awesome/wiki/Font-Awesome-HTML-Dropdown-Select-List

A complete HTML select element with optgroups containing Font Awesome icon options. The first optgroup (label not shown in the snippet) includes icons from 'icon-unlock' to 'icon-align-right', and the second optgroup labeled 'Text Editor Icons' includes icons from 'icon-file' to 'icon-align-right'. Use this to let users pick an icon from a predefined set.

```html
<option value="icon-unlock">icon-unlock</option>
    <option value="icon-magic">icon-magic</option>
    <option value="icon-magnet">icon-magnet</option>
    <option value="icon-map-marker">icon-map-marker</option>
    <option value="icon-minus">icon-minus</option>
    <option value="icon-minus-sign">icon-minus-sign</option>
    <option value="icon-mobile-phone">icon-mobile-phone</option>
    <option value="icon-money">icon-money</option>
    <option value="icon-move">icon-move</option>
    <option value="icon-music">icon-music</option>
    <option value="icon-off">icon-off</option>
    <option value="icon-ok">icon-ok</option>
    <option value="icon-ok-circle">icon-ok-circle</option>
    <option value="icon-ok-sign">icon-ok-sign</option>
    <option value="icon-pencil">icon-pencil</option>
    <option value="icon-picture">icon-picture</option>
    <option value="icon-plane">icon-plane</option>
    <option value="icon-plus">icon-plus</option>
    <option value="icon-plus-sign">icon-plus-sign</option>
    <option value="icon-print">icon-print</option>
    <option value="icon-pushpin">icon-pushpin</option>
    <option value="icon-qrcode">icon-qrcode</option>
    <option value="icon-question-sign">icon-question-sign</option>
    <option value="icon-quote-left">icon-quote-left</option>
    <option value="icon-quote-right">icon-quote-right</option>
    <option value="icon-random">icon-random</option>
    <option value="icon-refresh">icon-refresh</option>
    <option value="icon-remove">icon-remove</option>
    <option value="icon-remove-circle">icon-remove-circle</option>
    <option value="icon-remove-sign">icon-remove-sign</option>
    <option value="icon-reorder">icon-reorder</option>
    <option value="icon-reply">icon-reply</option>
    <option value="icon-resize-horizontal">icon-resize-horizontal</option>
    <option value="icon-resize-vertical">icon-resize-vertical</option>
    <option value="icon-retweet">icon-retweet</option>
    <option value="icon-road">icon-road</option>
    <option value="icon-rss">icon-rss</option>
    <option value="icon-screenshot">icon-screenshot</option>
    <option value="icon-search">icon-search</option>
    <option value="icon-share">icon-share</option>
    <option value="icon-share-alt">icon-share-alt</option>
    <option value="icon-shopping-cart">icon-shopping-cart</option>
    <option value="icon-signal">icon-signal</option>
    <option value="icon-signin">icon-signin</option>
    <option value="icon-signout">icon-signout</option>
    <option value="icon-sitemap">icon-sitemap</option>
    <option value="icon-sort">icon-sort</option>
    <option value="icon-sort-down">icon-sort-down</option>
    <option value="icon-sort-up">icon-sort-up</option>
    <option value="icon-spinner">icon-spinner</option>
    <option value="icon-star">icon-star</option>
    <option value="icon-star-empty">icon-star-empty</option>
    <option value="icon-star-half">icon-star-half</option>
    <option value="icon-tablet">icon-tablet</option>
    <option value="icon-tag">icon-tag</option>
    <option value="icon-tags">icon-tags</option>
    <option value="icon-tasks">icon-tasks</option>
    <option value="icon-thumbs-down">icon-thumbs-down</option>
    <option value="icon-thumbs-up">icon-thumbs-up</option>
    <option value="icon-time">icon-time</option>
    <option value="icon-tint">icon-tint</option>
    <option value="icon-trash">icon-trash</option>
    <option value="icon-trophy">icon-trophy</option>
    <option value="icon-truck">icon-truck</option>
    <option value="icon-umbrella">icon-umbrella</option>
    <option value="icon-upload">icon-upload</option>
    <option value="icon-upload-alt">icon-upload-alt</option>
    <option value="icon-user">icon-user</option>
    <option value="icon-user-md">icon-user-md</option>
    <option value="icon-volume-off">icon-volume-off</option>
    <option value="icon-volume-down">icon-volume-down</option>
    <option value="icon-volume-up">icon-volume-up</option>
    <option value="icon-warning-sign">icon-warning-sign</option>
    <option value="icon-wrench">icon-wrench</option>
    <option value="icon-zoom-in">icon-zoom-in</option>
    <option value="icon-zoom-out">icon-zoom-out</option>
  </optgroup>
  <optgroup label="Text Editor Icons">
    <option value="icon-file">icon-file</option>
    <option value="icon-file-alt">icon-file-alt</option>
    <option value="icon-cut">icon-cut</option>
    <option value="icon-copy">icon-copy</option>
    <option value="icon-paste">icon-paste</option>
    <option value="icon-save">icon-save</option>
    <option value="icon-undo">icon-undo</option>
    <option value="icon-repeat">icon-repeat</option>
    <option value="icon-text-height">icon-text-height</option>
    <option value="icon-text-width">icon-text-width</option>
    <option value="icon-align-left">icon-align-left</option>
    <option value="icon-align-center">icon-align-center</option>
    <option value="icon-align-right">icon-align-right</option>
```

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

### Clock with arrow - HTML

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

Layers an arrow icon over a clock icon, with two variations (up and down arrows). Requires Font Awesome 5.0.0 free and the SVG & JS framework. Each fa-layers element is combined with fa-fw.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-clock" data-fa-transform="left-4"></i>
    <i class="fas fa-long-arrow-alt-up" data-fa-transform="right-9"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-clock" data-fa-transform="left-4"></i>
    <i class="fas fa-long-arrow-alt-down" data-fa-transform="right-9"></i>
</span>
```

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

### Calender with clock - HTML

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

Layers a clock icon over a calendar mask. Requires Font Awesome 5.0.0 free and the SVG & JS framework. The fa-layers element is combined with fa-fw.

```html
<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-7 down-6 right-6" data-fa-mask="fas fa-calendar-alt"></i>
    <i class="far fa-clock" data-fa-transform="shrink-8 down-6 right-6"></i>
</span>
```

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

### Add html5shiv for IE8 Support

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

For Internet Explorer 8, include the html5shiv script to enable HTML5 elements. Note that random issues may still occur with this browser.

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

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

### Use ttembed-js in Node.js

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

Use the ttembed-js module within a Node.js script to change the fsType of font files. The callback logs the result or an error.

```js
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);
```

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

### Disable IE Compatibility Mode with Meta Tag

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

Add this meta tag as the first tag in the <head> to prevent Internet Explorer from using compatibility mode, which can cause random issues with Font Awesome icons.

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

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

### Hide br Tags in WordPress Icon Stacks

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

WordPress automatically adds <br> tags that break icon stacks. Add this CSS to your stylesheet to hide them.

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