Font Awesome Examples

# Examples

Lots of easy ways to use Font Awesome

- Follow @fontawesome
- Tweet

Heads up! These docs are for v3.2.1, which is no longer officially supported. Check out the latest version of Font Awesome!

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

## New Styles in 3.2

#### Rotated and Flipped Icons

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

#### Stacked Icons

icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank

#### Better Bulleted Lists

- New bulleted lists
- Fix some old bugs
- And deal with arbitrary
- Font sizes better

## Inline Icons

Place Font Awesome icons just about anywhere with the `<i>` tag.

icon-camera-retro

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

Icon classes are echoed via CSS :before.

## Larger Icons

To increase the size of icons relative to its container, use `icon-large`, `icon-2x`, `icon-3x`, or `icon-4x`.

Increase the icon size by using the `icon-large` (33% increase), `icon-2x`, `icon-3x`, or `icon-4x` classes.

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

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

## Bordered & Pulled Icons

Use `icon-border` and `pull-right` or `pull-left` for easy pull quotes or article graphics.

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.

    <i class="icon-quote-left icon-4x pull-left icon-muted"></i>
    Use a few of the new styles together ... lots of new possibilities.

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.

    <i class="icon-flag icon-4x pull-left icon-border"></i>
    Use a few of the new styles together ... lots of new possibilities.

## Buttons

Reload Checkout

Comment Info

Delete Settings

Font Awesome
Version 3.2.1

Synchronizing Content...

Font Awesome icons work great in buttons. You can even combine them with larger icon styles, `pull-right` and `pull-left`, and `icon-spin`.

    <a class="btn" href="#">
      <i class="icon-repeat"></i> Reload</a>
    <a class="btn btn-success" href="#">
      <i class="icon-shopping-cart icon-large"></i> Checkout</a>
    <a class="btn btn-large btn-primary" href="#">
      <i class="icon-comment"></i> Comment</a>
    <a class="btn btn-small btn-info" href="#">
      <i class="icon-info-sign"></i> Info</a>
    <a class="btn btn-danger" href="#">
      <i class="icon-trash icon-large"></i> Delete</a>
    <a class="btn btn-small" href="#">
      <i class="icon-cog"></i> Settings</a>
    <a class="btn btn-large btn-danger" href="#">
      <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1</a>
    <a class="btn btn-primary" href="#">
      <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

## Button Groups

    <div class="btn-group">
      <a class="btn" href="#"><i class="icon-align-left"></i></a>
      <a class="btn" href="#"><i class="icon-align-center"></i></a>
      <a class="btn" href="#"><i class="icon-align-right"></i></a>
      <a class="btn" href="#"><i class="icon-align-justify"></i></a>
    </div>

## Button Dropdowns

User

    <div class="btn-group open">
      <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="icon-caret-down"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
      </ul>
    </div>

Don't forget to add the appropriate JavaScript to enable button dropdowns.

## Bulleted Lists

- Bulleted lists (like this one)
- Buttons
- Button groups
- Navigation
- Prepended form inputs
- …and many more with custom CSS

Easily replace individual bullets.

    <ul class="icons-ul">
      <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
      <li><i class="icon-li icon-ok"></i>Buttons</li>
      <li><i class="icon-li icon-ok"></i>Button groups</li>
      <li><i class="icon-li icon-ok"></i>Navigation</li>
      <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
      <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
    </ul>

Make sure to NOT include any whitespace after the icon declaration.

## Navigation

Use Font Awesome icons in navigation to provide helpful visual cues.

    <ul class="nav nav-list">
      <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
      <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
      <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
      <li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li>
    </ul>

## Prepended & Appended Form Inputs

    <form>
      <div class="input-prepend">
        <span class="add-on"><i class="icon-envelope"></i></span>
        <input class="span2" type="text" placeholder="Email address">
      </div>
      <div class="input-prepend">
        <span class="add-on"><i class="icon-key"></i></span>
        <input class="span2" type="password" placeholder="Password">
      </div>
    </form>

## Animated Spinner

Use the `icon-spin` class to get any icon to rotate. Works well with `icon-spinner` and `icon-refresh`.
Spinner icon when loading content...

    <i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...

CSS3 animations aren't supported in IE7 - IE9.

## Rotated & Flipped

A set of classes that can be used to arbitrarily rotate and flip icons.
normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical

    <i class="icon-shield"></i>&nbsp; normal<br>
    <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
    <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
    <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
    <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
    <i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical

Rotating and flipping icons aren't yet supported in IE7.

## Stacked Icons

A method for easily stacking multiple icons. Use the `icon-stack` class on the parent and `icon-stack-base` for the bottom icon.
icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank
icon-camera on icon-ban-circle

    <span class="icon-stack">
      <i class="icon-check-empty icon-stack-base"></i>
      <i class="icon-twitter"></i>
    </span>
    icon-twitter on icon-check-empty<br>
    <span class="icon-stack">
      <i class="icon-circle icon-stack-base"></i>
      <i class="icon-flag icon-light"></i>
    </span>
    icon-flag on icon-circle<br>
    <span class="icon-stack">
      <i class="icon-sign-blank icon-stack-base"></i>
      <i class="icon-terminal icon-light"></i>
    </span>
    icon-terminal on icon-sign-blank<br>
    <span class="icon-stack">
      <i class="icon-camera"></i>
      <i class="icon-ban-circle icon-stack-base text-error"></i>
    </span>
    icon-camera on icon-ban-circle

## Custom CSS

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

Star Ratings (inspired by CSS Tricks)