Font Awesome Examples
Author: Dave Gandy
Description: Font Awesome, the iconic font designed for Bootstrap

# 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. 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)