# Font Awesome Examples
Font Awesome, the iconic font and CSS framework
Author: Dave Gandy

Font Awesome 5 released! New icons, SVG, ligatures, & tons more.
Font Awesome 5

# Examples

Lots of easy ways to use Font Awesome

- Follow @fontawesome
- Tweet

After you get up and running, you can place Font Awesome icons just about anywhere with the `<i>` tag. Some examples appreciatively re-used from the Bootstrap documentation.

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

## Basic Icons
View LESS View SASS

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix `fa` and the icon's name. Font Awesome is designed to be used with inline elements (we like the `<i>` tag for brevity, but using a `<span>` is more semantically correct).

    <i class="fa fa-camera-retro"></i> fa-camera-retro

- Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

## Larger Icons
View LESS View SASS

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the `fa-lg` (33% increase), `fa-2x`, `fa-3x`, `fa-4x`, or `fa-5x` classes.

    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x

- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

## Fixed Width Icons
View LESS View SASS

Home Library Applications Settings

Use `fa-fw` to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

    <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
      <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
      <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
      <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
    </div>

## List Icons
View LESS View SASS

- List icons
- can be used
- as bullets
- in lists

Use `fa-ul` and `fa-li` to easily replace default bullets in unordered lists.

    <ul class="fa-ul">
      <li><i class="fa-li fa fa-check-square"></i>List icons</li>
      <li><i class="fa-li fa fa-check-square"></i>can be used</li>
      <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
      <li><i class="fa-li fa fa-square"></i>in lists</li>
    </ul>

## Bordered & Pulled Icons
View LESS View SASS

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use `fa-border` and `fa-pull-right` or `fa-pull-left` for easy pull quotes or article icons.

    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
    ...tomorrow we will run faster, stretch out our arms farther...
    And then one fine morning&mdash; So we beat on, boats against the
    current, borne back ceaselessly into the past.

## Animated Icons
View LESS View SASS

Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)

Use the `fa-spin` class to get any icon to rotate, and use `fa-pulse` to have it rotate with 8 steps. Works well with `fa-spinner`, `fa-refresh`, and `fa-cog`.

    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

    <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>

Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.

Note: CSS3 animations aren't supported in IE8 - IE9.

## Rotated & Flipped
View LESS View SASS

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

To arbitrarily rotate and flip icons, use the `fa-rotate-*` and `fa-flip-*` classes.

    <i class="fa fa-shield"></i> normal<br>
    <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
    <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
    <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
    <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

## Stacked Icons
View LESS View SASS

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

To stack multiple icons, use the `fa-stack` class on the parent, the `fa-stack-1x` for the regularly sized icon, and `fa-stack-2x` for the larger icon. `fa-inverse` can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

    <span class="fa-stack fa-lg">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i>
    </span>
    fa-twitter on fa-square-o<br>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
    </span>
    fa-flag on fa-circle<br>
    <span class="fa-stack fa-lg">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
    </span>
    fa-terminal on fa-square<br>
    <span class="fa-stack fa-lg">
      <i class="fa fa-camera fa-stack-1x"></i>
      <i class="fa fa-ban fa-stack-2x text-danger"></i>
    </span>
    fa-ban on fa-camera

## Bootstrap 3 Examples

Delete Settings

Font Awesome
Version 4.7.0

User

Font Awesome works great with the full range of Bootstrap components.

    <a class="btn btn-danger" href="#">
      <i class="fa fa-trash-o fa-lg"></i> Delete</a>
    <a class="btn btn-default btn-sm" href="#">
      <i class="fa fa-cog"></i> Settings</a>

    <a class="btn btn-lg btn-success" href="#">
      <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

    <div class="btn-group">
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-left" title="Align Left"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-center" title="Align Center"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-right" title="Align Right"></i>
      </a>
      <a class="btn btn-default" href="#">
        <i class="fa fa-align-justify" title="Align Justify"></i>
      </a>
    </div>

    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
      <input class="form-control" type="text" placeholder="Email address">
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
      <input class="form-control" type="password" placeholder="Password">
    </div>

    <div class="btn-group open">
      <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
        <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
        <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
      </ul>
    </div>

## Custom CSS

Anything you can do with CSS font styles, you can do with Font Awesome.

Star Ratings (inspired by CSS Tricks)

## Accessibility-Minded

Refreshing... Saving. Hang tight!

Battery level: 50%

With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.

    <a class="btn btn-default" href="path/to/settings" aria-label="Settings">
      <i class="fa fa-cog" aria-hidden="true"></i>
    </a>

    <a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
      <i class="fa fa-trash-o" aria-hidden="true"></i>
    </a>

    <a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </a>

    <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
    <span class="sr-only">Refreshing...</span>

    <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
    <span class="sr-only">Saving. Hang tight!</span>

    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
      <input class="form-control" type="text" placeholder="Email address">
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
      <input class="form-control" type="password" placeholder="Password">
    </div>

    <a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
      <i class="fa fa-shopping-cart" aria-hidden="true"></i>
    </a>

    <i class="fa fa-battery-half" aria-hidden="true"></i>
    <span class="sr-only">Battery level: 50%</span>

### Font Awesome 5 Released!

#### More Icons

Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!

#### All-New SVG

Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.

#### Tons More

Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.

### Font Awesome 5