How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

<i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

---

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar

<div class="btn-toolbar">
  <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>
</div>

Dropdown in a button group

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

Small button

<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

Email address

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
  </div>
</div>

<form class="well form-inline">
                  <div class="input-append pull-right">
                  <input type="text" class="" onfocus="if(this.value =='title | part number | keyword' ) this.value=''" onblur="if(this.value=='') this.value='title | part number | keyword'" value="title | part number | keyword" placeholder="title | part number | keyword" id="appendedInput">
                  <span class="add-on btn-primary"><i class="icon-white icon-search"></i></span>
                  </div>
                  <div class="clearfix"></div>
                  </form>
            

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
            

Horizontal form markup

Given the example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

<form class="well form-horizontal">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>
            

Vertical form markup

Given the example form layout, here's the markup for the whole form. The .control-group, .control-label, and .controls classes are all required for styling.

<form class="well form-vertical">
          <fieldset>
            <legend>Enter Account Information:</legend>
            <div class="span3">
              <label class="control-label" for="input01"><span class="required_field">*</span>First Name</label>
              <input class="span3" id="input01" type="text" />
            </div>
            <div class="span3">
              <label class="control-label" for="lastname"><span class="required_field">*</span>Last Name</label>
              <input class="span3" id="lastname" type="text" />
            </div>
            <div class="span3">
              <label class="control-label" for="ssntax"><span class="required_field">*</span>SSN/Tax ID</label>
              <input class="span3" id="ssntax" type="number" />
            </div>
            <div class="span3">
              <label class="control-label" for="accountnumber"><span class="required_field">*</span>Account Number</label>
              <input class="span3" id="accountnumber" type="number" />
            </div>
            <div class="span3">
              <label class="control-label" for="email"><span class="required_field">*</span>Email Field</label>
              <input class="span3" id="email" type="email" />
            </div>
            <div class="span3">
              <label class="control-label" for="email"><span class="required_field">*</span>Verify Email Field</label>
              <input class="span3" id="email" type="email" />
            </div>
            <div class="span3">
              <label class="control-label" for="date"><span class="required_field">*</span>Date Field</label>
              <div class="input-append">
                <input class="span2 datepicker" id="datepicker" type="date" />
                <span class="add-on"><a href="#" class="date-pick-button"><i class="icon icon-calendar"></i></a></span> </div>
            </div>
            <div class="span3">
              <label class="control-label" for="email"><span class="required_field">*</span>Phone Field</label>
              <span class="phone-fields">(</span><input class="span1" id="phone" type="tel" pattern="\d{3}" title="Area code: 999" /><span class="phone-fields">)</span> <input class="span1" id="phone" type="tel" pattern="\d{3}" title="First three digits: 999" /> <span class="phone-fields">–</span> <input class="span1" id="phone" type="tel" pattern="\d{4}" title="Last four digits: 9999" /></span>
            </div>
            <div class="clearfix"></div>
            <div class="form-actions">
              <div class="pull-right">
                <button class="btn btn-small btn-link">Cancel</button>
                <button class="btn btn-primary" type="submit">Continue</button>
              </div>
            </div>
          </fieldset>
        </form>
            

<fieldset
  class="control-group error">
  ...
</fieldset>

Focused input

Uneditable input

Some value here

Disabled input

Disabled checkbox

This is a disabled checkbox

Input with warning

Something may have gone wrong

Input with error

Please correct the error

Input with success

Woohoo!

Select with success

1 2 3 4 5 Woohoo!

Save changes Cancel

Form grid sizes

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Use the same .span* classes from the grid system for input sizes.

Alternate sizes

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

Prepended text

@

Here's some help text

Appended text

.00

Here's more help text

Append and prepend

$.00

Append with button

Go!

Two-button append

SearchOptions

Inline checkboxes

1 2 3

Checkboxes

Option one Option two can also be checked and included in form results Option three can also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

Radio buttons

Option one Option two can be something else and selecting it will deselect option one

Cancel Save changes