Typography
-
Headings
All HTML headings,
<h1>
through<h6>
are available.h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body copy
Bootstrap's global default
font-size
is 14px, with aline-height
of 20px. This is applied to the<body>
and all paragraphs. In addition,<p>
(paragraphs) receive a bottom margin of half their line-height (10px by default).Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Lead body copy
Make a paragraph stand out by adding
.lead
.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Built with Less
The typographic scale is based on two LESS variables in variables.less:
@baseFontSize
and@baseLineHeight
. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
Emphasis
Make use of HTML's default emphasis tags with lightweight styles.
<small>
For de-emphasizing inline or blocks of text, use the small tag.
This line of text is meant to be treated as fine print.
<p> <small>This line of text is meant to be treated as fine print.</small> </p>
Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
Heads up! Feel free to use
<b>
and<i>
in HTML5.<b>
is meant to highlight words or phrases without conveying additional importance while<i>
is mostly for voice, technical terms, etc.Alignment classes
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
Emphasis classes
Convey meaning through color with a handful of emphasis utility classes.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Abbreviations
Stylized implementation of HTML's
<abbr>
element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with atitle
attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.<abbr>
For expanded text on long hover of an abbreviation, include the
title
attribute.An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Add
.initialism
to an abbreviation for a slightly smaller font-size.HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Addresses
Present contact information for the nearest ancestor or the entire body of work.
<address>
Preserve formatting by ending all lines with
<br>
.Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
This email address is being protected from spambots. You need JavaScript enabled to view it.<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">This email address is being protected from spambots. You need JavaScript enabled to view it.</a> </address>
Blockquotes
For quoting blocks of content from another source within your document.
Default blockquote
Wrap
<blockquote>
around any HTML as the quote. For straight quotes we recommend a<p>
.Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer posuere erat a ante.<blockquote> <p>Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Blockquote options
Style and content changes for simple variations on a standard blockquote.
Naming a source
Add
<small>
tag for identifying the source. Wrap the name of the source work in<cite>
.Lorem ipsum dolor sit amet,
Someone famous in Source Title
consectetur adipiscing elit. Integer posuere erat a ante.<blockquote> <p>Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>
Alternate displays
Use
.pull-right
for a floated, right-aligned blockquote.<blockquote class="pull-right"> ... </blockquote>
Lists
Unordered
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul> <li>...</li> </ul>
Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol> <li>...</li> </ol>
Unstyled
Remove the default
list-style
and left padding on list items (immediate children only).- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="unstyled"> <li>...</li> </ul>
Inline
Place all list items on a single line with
inline-block
and some light padding.- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="inline"> <li>...</li> </ul>
Description
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl> <dt>...</dt> <dd>...</dd> </dl>
Horizontal description
Make terms and descriptions in
<dl>
line up side-by-side.- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix
text-overflow
. In narrower viewports, they will change to the default stacked layout. Code
-
Inline
Wrap inline snippets of code with
<code>
.For example,<section>
should be wrapped as inline.For example, <code><section></code> should be wrapped as inline.
Basic block
Use
<pre>
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
Heads up! Be sure to keep code within
<pre>
tags as close to the left as possible; it will render all tabs.You may optionally add the
.pre-scrollable
class which will set a max-height of 350px and provide a y-axis scrollbar. Tables
-
Default styles
For basic styling—light padding and only horizontal dividers—add the base class
.table
to any<table>
.# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class="table"> … </table>
Optional classes
Add any of the following classes to the
.table
base class..table-striped
Adds zebra-striping to any table row within the
<tbody>
via the:nth-child
CSS selector (not available in IE7-8).# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class="table table-striped"> … </table>
.table-bordered
Add borders and rounded corners to the table.
# First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class="table table-bordered"> … </table>
.table-hover
Enable a hover state on table rows within a
<tbody>
.# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class="table table-hover"> … </table>
.table-condensed
Makes tables more compact by cutting cell padding in half.
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter <table class="table table-condensed"> … </table>
Optional row classes
Use contextual classes to color table rows.
Class Description .success
Indicates a successful or positive action. .error
Indicates a dangerous or potentially negative action. .warning
Indicates a warning that might need attention. .info
Used as an alternative to the default styles. # Product Payment Taken Status 1 TB - Monthly 01/04/2012 Approved 2 TB - Monthly 02/04/2012 Declined 3 TB - Monthly 03/04/2012 Pending 4 TB - Monthly 04/04/2012 Call in to confirm ... <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> ...
Supported table markup
List of supported table HTML elements and how they should be used.
Tag Description <table>
Wrapping element for displaying data in a tabular format <thead>
Container element for table header rows ( <tr>
) to label table columns<tbody>
Container element for table rows ( <tr>
) in the body of the table<tr>
Container element for a set of table cells ( <td>
or<th>
) that appears on a single row<td>
Default table cell <th>
Special table cell for column (or row, depending on scope and placement) labels <caption>
Description or summary of what the table holds, especially useful for screen readers <table> <caption>...</caption> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>
Forms
-
Default styles
Individual form controls receive styling, but without any required base class on the
<form>
or large changes in markup. Results in stacked, left-aligned labels on top of form controls.<form> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </fieldset> </form>
Optional layouts
Included with Bootstrap are three optional form layouts for common use cases.
Search form
Add
.form-search
to the form and.search-query
to the<input>
for an extra-rounded text input.<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
Inline form
Add
.form-inline
for left-aligned labels and inline-block controls for a compact layout.<form class="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
Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
- Add
.form-horizontal
to the form - Wrap labels and controls in
.control-group
- Add
.control-label
to the label - Wrap any associated controls in
.controls
for proper alignment
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
Supported form controls
Examples of standard form controls supported in an example form layout.
Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Requires the use of a specified
type
at all times.<input type="text" placeholder="Text input">
Textarea
Form control which supports multiple lines of text. Change
rows
attribute as necessary.<textarea rows="3"></textarea>
Checkboxes and radios
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Default (stacked)
<label class="checkbox"> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
Inline checkboxes
Add the
.inline
class to a series of checkboxes or radios for controls appear on the same line.<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Selects
Use the default option or specify a
multiple="multiple"
to show multiple options at once.<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
Extending form controls
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Prepended and appended inputs
Add text or buttons before or after any text-based input. Do note that
select
elements are not supported here.Default options
Wrap an
.add-on
and aninput
with one of two classes to prepend or append text to an input.<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Combined
Use both classes and two instances of
.add-on
to prepend and append an input.<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Buttons instead of text
Instead of a
<span>
with text, use a.btn
to attach a button (or two) to an input.<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div>
Button dropdowns
<div class="input-append"> <input class="span2" id="appendedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
<div class="input-prepend"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="prependedDropdownButton" type="text"> </div>
<div class="input-prepend input-append"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="appendedPrependedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
Segmented dropdown groups
<form> <div class="input-prepend"> <div class="btn-group">...</div> <input type="text"> </div> <div class="input-append"> <input type="text"> <div class="btn-group">...</div> </div> </form>
Search form
<form class="form-search"> <div class="input-append"> <input type="text" class="span2 search-query"> <button type="submit" class="btn">Search</button> </div> <div class="input-prepend"> <button type="submit" class="btn">Search</button> <input type="text" class="span2 search-query"> </div> </form>
Control sizing
Use relative sizing classes like
.input-large
or match your inputs to the grid column sizes using.span*
classes.Block level inputs
Make any
<input>
or<textarea>
element behave like a block level element.<input class="input-block-level" type="text" placeholder=".input-block-level">
Relative sizing
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example,
.input-large
will increase the padding and font-size of an input.Grid sizing
Use
.span1
to.span12
for inputs that match the same sizes of the grid columns.<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
For multiple grid inputs per line, use the
.controls-row
modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Uneditable inputs
Present data in a form that's not editable without using actual form markup.
<span class="input-xlarge uneditable-input">Some value here</span>
Form actions
End a form with a group of actions (buttons). When placed within a
.form-actions
, the buttons will automatically indent to line up with the form controls.<div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button type="button" class="btn">Cancel</button> </div>
Help text
Inline and block level support for help text that appears around form controls.
Inline help
<input type="text"><span class="help-inline">Inline help text</span>
Block help
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
Form control states
Provide feedback to users or visitors with basic feedback states on form controls and labels.
Input focus
We remove the default
outline
styles on some form controls and apply abox-shadow
in its place for:focus
.<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
Invalid inputs
Style inputs via default browser functionality with
:invalid
. Specify atype
, add therequired
attribute if the field is not optional, and (if applicable) specify apattern
.This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.
<input class="span3" type="email" required>
Disabled inputs
Add the
disabled
attribute on an input to prevent user input and trigger a slightly different look.<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Validation states
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding
.control-group
.<div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group info"> <label class="control-label" for="inputInfo">Input with info</label> <div class="controls"> <input type="text" id="inputInfo"> <span class="help-inline">Username is already taken</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div>
- Add
Buttons
-
Default buttons
Button styles can be applied to anything with the
.btn
class applied. However, typically you'll want to apply these to only<a>
and<button>
elements for the best rendering.Button class="" Description btn
Standard gray button with gradient btn btn-primary
Provides extra visual weight and identifies the primary action in a set of buttons btn btn-info
Used as an alternative to the default styles btn btn-success
Indicates a successful or positive action btn btn-warning
Indicates caution should be taken with this action btn btn-danger
Indicates a dangerous or potentially negative action btn btn-inverse
Alternate dark gray button, not tied to a semantic action or use btn btn-link
Deemphasize a button by making it look like a link while maintaining button behavior Cross browser compatibility
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled
button
elements, rendering text gray with a nasty text-shadow that we cannot fix.Button sizes
Fancy larger or smaller buttons? Add
.btn-large
,.btn-small
, or.btn-mini
for additional sizes.<p> <button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button> </p> <p> <button class="btn btn-primary" type="button">Default button</button> <button class="btn" type="button">Default button</button> </p> <p> <button class="btn btn-small btn-primary" type="button">Small button</button> <button class="btn btn-small" type="button">Small button</button> </p> <p> <button class="btn btn-mini btn-primary" type="button">Mini button</button> <button class="btn btn-mini" type="button">Mini button</button> </p>
Create block level buttons—those that span the full width of a parent— by adding
.btn-block
.<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> <button class="btn btn-large btn-block" type="button">Block level button</button>
Disabled state
Make buttons look unclickable by fading them back 50%.
Anchor element
Add the
.disabled
class to<a>
buttons.<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large disabled">Link</a>
Heads up! We use
.disabled
as a utility class here, similar to the common.active
class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.Button element
Add the
disabled
attribute to<button>
buttons.<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> <button type="button" class="btn btn-large" disabled>Button</button>
One class, multiple tags
Use the
.btn
class on an<a>
,<button>
, or<input>
element.<a class="btn" href="/">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit">
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an
input
, use an<input type="submit">
for your button. Images
-
Add classes to an
<img>
element to easily style images in any project.<img src="/..." class="img-rounded"> <img src="/..." class="img-circle"> <img src="/..." class="img-polaroid">
Heads up!
.img-rounded
and.img-circle
do not work in IE7-8 due to lack ofborder-radius
support. Icons
-
Icons
30 New Icons in 4.6
Example of audio-descriptionExample of blindExample of brailleExample of deafExample of deafness (alias)Example of enviraExample of fa (alias)Example of first-orderExample of font-awesomeExample of gitlabExample of glideExample of glide-gExample of google-plus-circle (alias)Example of google-plus-officialExample of hard-of-hearing (alias)Example of instagramExample of low-visionExample of pied-piperExample of question-circle-oExample of sign-languageExample of signing (alias)Example of snapchatExample of snapchat-ghostExample of snapchat-squareExample of themeisleExample of universal-accessExample of viadeoExample of viadeo-squareExample of volume-control-phoneExample of wheelchair-altExample of wpbeginnerExample of wpformsExample of yoastWeb Application Icons
Example of arrows-hExample of arrows-vExample of asl-interpreting (alias)Example of assistive-listening-systemsExample of asteriskExample of atExample of audio-descriptionExample of automobile (alias)Example of balance-scaleExample of banExample of bank (alias)Example of bar-chartExample of bar-chart-o (alias)Example of barcodeExample of barsExample of battery-0 (alias)Example of battery-1 (alias)Example of battery-2 (alias)Example of battery-3 (alias)Example of battery-4 (alias)Example of battery-emptyExample of battery-fullExample of battery-halfExample of battery-quarterExample of battery-three-quartersExample of bedExample of beerExample of bellExample of bell-oExample of bell-slashExample of bell-slash-oExample of bicycleExample of binocularsExample of birthday-cakeExample of blindExample of bluetoothExample of bluetooth-bExample of boltExample of bombExample of bookExample of bookmarkExample of bookmark-oExample of brailleExample of briefcaseExample of bugExample of buildingExample of building-oExample of bullhornExample of bullseyeExample of busExample of cab (alias)Example of calculatorExample of calendarExample of calendar-check-oExample of calendar-minus-oExample of calendar-oExample of calendar-plus-oExample of calendar-times-oExample of cameraExample of camera-retroExample of carExample of caret-square-o-downExample of caret-square-o-leftExample of caret-square-o-rightExample of caret-square-o-upExample of cart-arrow-downExample of cart-plusExample of ccExample of certificateExample of checkExample of check-circleExample of check-circle-oExample of check-squareExample of check-square-oExample of childExample of circleExample of circle-oExample of circle-o-notchExample of circle-thinExample of clock-oExample of cloneExample of close (alias)Example of cloudExample of cloud-downloadExample of cloud-uploadExample of codeExample of code-forkExample of coffeeExample of cogExample of cogsExample of commentExample of comment-oExample of commentingExample of commenting-oExample of commentsExample of comments-oExample of compassExample of copyrightExample of creative-commonsExample of credit-cardExample of credit-card-altExample of cropExample of crosshairsExample of cubeExample of cubesExample of cutleryExample of dashboard (alias)Example of databaseExample of deafExample of deafness (alias)Example of desktopExample of diamondExample of dot-circle-oExample of downloadExample of edit (alias)Example of ellipsis-hExample of ellipsis-vExample of envelopeExample of envelope-oExample of envelope-squareExample of eraserExample of exchangeExample of exclamationExample of exclamation-circleExample of exclamation-triangleExample of external-linkExample of external-link-squareExample of eyeExample of eye-slashExample of eyedropperExample of faxExample of feed (alias)Example of femaleExample of fighter-jetExample of file-archive-oExample of file-audio-oExample of file-code-oExample of file-excel-oExample of file-image-oExample of file-movie-o (alias)Example of file-pdf-oExample of file-photo-o (alias)Example of file-picture-o (alias)Example of file-powerpoint-oExample of file-sound-o (alias)Example of file-video-oExample of file-word-oExample of file-zip-o (alias)Example of filmExample of filterExample of fireExample of fire-extinguisherExample of flagExample of flag-checkeredExample of flag-oExample of flash (alias)Example of flaskExample of folderExample of folder-oExample of folder-openExample of folder-open-oExample of frown-oExample of futbol-oExample of gamepadExample of gavelExample of gear (alias)Example of gears (alias)Example of giftExample of glassExample of globeExample of graduation-capExample of group (alias)Example of hand-grab-o (alias)Example of hand-lizard-oExample of hand-paper-oExample of hand-peace-oExample of hand-pointer-oExample of hand-rock-oExample of hand-scissors-oExample of hand-spock-oExample of hand-stop-o (alias)Example of hard-of-hearing (alias)Example of hashtagExample of hdd-oExample of headphonesExample of heartExample of heart-oExample of heartbeatExample of historyExample of homeExample of hotel (alias)Example of hourglassExample of hourglass-1 (alias)Example of hourglass-2 (alias)Example of hourglass-3 (alias)Example of hourglass-endExample of hourglass-halfExample of hourglass-oExample of hourglass-startExample of i-cursorExample of image (alias)Example of inboxExample of industryExample of infoExample of info-circleExample of institution (alias)Example of keyExample of keyboard-oExample of languageExample of laptopExample of leafExample of legal (alias)Example of lemon-oExample of level-downExample of level-upExample of life-bouy (alias)Example of life-buoy (alias)Example of life-ringExample of life-saver (alias)Example of lightbulb-oExample of line-chartExample of location-arrowExample of lockExample of low-visionExample of magicExample of magnetExample of mail-forward (alias)Example of mail-reply (alias)Example of mail-reply-all (alias)Example of maleExample of mapExample of map-markerExample of map-oExample of map-pinExample of map-signsExample of meh-oExample of microphoneExample of microphone-slashExample of minusExample of minus-circleExample of minus-squareExample of minus-square-oExample of mobileExample of mobile-phone (alias)Example of moneyExample of moon-oExample of mortar-board (alias)Example of motorcycleExample of mouse-pointerExample of musicExample of navicon (alias)Example of newspaper-oExample of object-groupExample of object-ungroupExample of paint-brushExample of paper-planeExample of paper-plane-oExample of pawExample of pencilExample of pencil-squareExample of pencil-square-oExample of percentExample of phoneExample of phone-squareExample of photo (alias)Example of picture-oExample of pie-chartExample of planeExample of plugExample of plusExample of plus-circleExample of plus-squareExample of plus-square-oExample of power-offExample of printExample of puzzle-pieceExample of qrcodeExample of questionExample of question-circleExample of question-circle-oExample of quote-leftExample of quote-rightExample of randomExample of recycleExample of refreshExample of registeredExample of remove (alias)Example of reorder (alias)Example of replyExample of reply-allExample of retweetExample of roadExample of rocketExample of rssExample of rss-squareExample of searchExample of search-minusExample of search-plusExample of send (alias)Example of send-o (alias)Example of serverExample of shareExample of share-altExample of share-alt-squareExample of share-squareExample of share-square-oExample of shieldExample of shipExample of shopping-bagExample of shopping-basketExample of shopping-cartExample of sign-inExample of sign-languageExample of sign-outExample of signalExample of signing (alias)Example of sitemapExample of slidersExample of smile-oExample of soccer-ball-o (alias)Example of sortExample of sort-alpha-ascExample of sort-alpha-descExample of sort-amount-ascExample of sort-amount-descExample of sort-ascExample of sort-descExample of sort-down (alias)Example of sort-numeric-ascExample of sort-numeric-descExample of sort-up (alias)Example of space-shuttleExample of spinnerExample of spoonExample of squareExample of square-oExample of starExample of star-halfExample of star-half-empty (alias)Example of star-half-full (alias)Example of star-half-oExample of star-oExample of sticky-noteExample of sticky-note-oExample of street-viewExample of suitcaseExample of sun-oExample of support (alias)Example of tabletExample of tachometerExample of tagExample of tagsExample of tasksExample of taxiExample of televisionExample of terminalExample of thumb-tackExample of thumbs-downExample of thumbs-o-downExample of thumbs-o-upExample of thumbs-upExample of ticketExample of timesExample of times-circleExample of times-circle-oExample of tintExample of toggle-down (alias)Example of toggle-left (alias)Example of toggle-offExample of toggle-onExample of toggle-right (alias)Example of toggle-up (alias)Example of trademarkExample of trashExample of trash-oExample of treeExample of trophyExample of truckExample of ttyExample of tv (alias)Example of umbrellaExample of universal-accessExample of universityExample of unlockExample of unlock-altExample of unsorted (alias)Example of uploadExample of userExample of user-plusExample of user-secretExample of user-timesExample of usersExample of video-cameraExample of volume-control-phoneExample of volume-downExample of volume-offExample of volume-upExample of warning (alias)Example of wheelchairExample of wheelchair-altExample of wifiExample of wrenchAccessibility Icons
Hand Icons
Example of hand-o-leftExample of hand-o-rightExample of hand-o-upExample of hand-paper-oExample of hand-peace-oExample of hand-pointer-oExample of hand-rock-oExample of hand-scissors-oExample of hand-spock-oExample of hand-stop-o (alias)Example of thumbs-downExample of thumbs-o-downExample of thumbs-o-upExample of thumbs-upTransportation Icons
Example of busExample of cab (alias)Example of carExample of fighter-jetExample of motorcycleExample of planeExample of rocketExample of shipExample of space-shuttleExample of subwayExample of taxiExample of trainExample of truckExample of wheelchairGender Icons
Example of mars-doubleExample of mars-strokeExample of mars-stroke-hExample of mars-stroke-vExample of mercuryExample of neuterExample of transgenderExample of transgender-altExample of venusExample of venus-doubleExample of venus-marsFile Type Icons
Example of file-code-oExample of file-excel-oExample of file-image-oExample of file-movie-o (alias)Example of file-oExample of file-pdf-oExample of file-photo-o (alias)Example of file-picture-o (alias)Example of file-powerpoint-oExample of file-sound-o (alias)Example of file-textExample of file-text-oExample of file-video-oExample of file-word-oExample of file-zip-o (alias)Spinner Icons
-
Note: These icons work great with the
icon-spin
class..
Example of refreshExample of spinnerForm Control Icons
Example of circle-oExample of dot-circle-oExample of minus-squareExample of minus-square-oExample of plus-squareExample of plus-square-oExample of squareExample of square-oPayment Icons
Example of cc-jcbExample of cc-mastercardExample of cc-paypalExample of cc-stripeExample of cc-visaExample of credit-cardExample of credit-card-altExample of google-walletExample of paypalChart Icons
Example of line-chartExample of pie-chartCurrency Icons
Example of dollar (alias)Example of eurExample of euro (alias)Example of gbpExample of ggExample of gg-circleExample of ilsExample of inrExample of jpyExample of krwExample of moneyExample of rmb (alias)Example of rouble (alias)Example of rubExample of ruble (alias)Example of rupee (alias)Example of shekel (alias)Example of sheqel (alias)Example of tryExample of turkish-lira (alias)Example of usdExample of won (alias)Example of yen (alias)Text Editor Icons
Example of align-rightExample of boldExample of chain (alias)Example of chain-brokenExample of clipboardExample of columnsExample of copy (alias)Example of cut (alias)Example of dedent (alias)Example of eraserExample of fileExample of file-oExample of file-textExample of file-text-oExample of files-oExample of floppy-oExample of fontExample of headerExample of indentExample of italicExample of linkExample of listExample of list-altExample of list-olExample of list-ulExample of outdentExample of paperclipExample of paragraphExample of paste (alias)Example of repeatExample of rotate-left (alias)Example of rotate-right (alias)Example of save (alias)Example of scissorsExample of strikethroughExample of subscriptExample of superscriptExample of tableExample of text-heightExample of text-widthExample of thExample of th-largeExample of th-listExample of underlineExample of undoExample of unlink (alias)Directional Icons
Example of angle-double-upExample of angle-downExample of angle-leftExample of angle-rightExample of angle-upExample of arrow-circle-downExample of arrow-circle-leftExample of arrow-circle-o-downExample of arrow-circle-o-leftExample of arrow-circle-o-rightExample of arrow-circle-o-upExample of arrow-circle-rightExample of arrow-circle-upExample of arrow-downExample of arrow-leftExample of arrow-rightExample of arrow-upExample of arrowsExample of arrows-altExample of arrows-hExample of arrows-vExample of caret-downExample of caret-leftExample of caret-rightExample of caret-square-o-downExample of caret-square-o-leftExample of caret-square-o-rightExample of caret-square-o-upExample of caret-upExample of chevron-circle-downExample of chevron-circle-leftExample of chevron-circle-rightExample of chevron-circle-upExample of chevron-downExample of chevron-leftExample of chevron-rightExample of chevron-upExample of exchangeExample of hand-o-downExample of hand-o-leftExample of hand-o-rightExample of hand-o-upExample of long-arrow-downExample of long-arrow-leftExample of long-arrow-rightExample of long-arrow-upExample of toggle-down (alias)Example of toggle-left (alias)Example of toggle-right (alias)Example of toggle-up (alias)Video Player Icons
Example of ejectExample of expandExample of fast-backwardExample of fast-forwardExample of forwardExample of pauseExample of pause-circleExample of pause-circle-oExample of playExample of play-circleExample of play-circle-oExample of randomExample of step-backwardExample of step-forwardExample of stopExample of stop-circleExample of stop-circle-oExample of youtube-playBrand Icons
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.Example of androidExample of angellistExample of appleExample of behanceExample of behance-squareExample of bitbucketExample of bitbucket-squareExample of bitcoin (alias)Example of black-tieExample of bluetoothExample of bluetooth-bExample of btcExample of buyselladsExample of cc-amexExample of cc-diners-clubExample of cc-discoverExample of cc-jcbExample of cc-mastercardExample of cc-paypalExample of cc-stripeExample of cc-visaExample of chromeExample of codepenExample of codiepieExample of connectdevelopExample of contaoExample of css3Example of dashcubeExample of deliciousExample of deviantartExample of diggExample of dribbbleExample of dropboxExample of drupalExample of edgeExample of empireExample of enviraExample of expeditedsslExample of fa (alias)Example of facebookExample of facebook-f (alias)Example of facebook-officialExample of facebook-squareExample of firefoxExample of first-orderExample of flickrExample of font-awesomeExample of fonticonsExample of fort-awesomeExample of forumbeeExample of foursquareExample of ge (alias)Example of get-pocketExample of ggExample of gg-circleExample of gitExample of git-squareExample of githubExample of github-altExample of github-squareExample of gitlabExample of gittip (alias)Example of glideExample of glide-gExample of googleExample of google-plusExample of google-plus-circle (alias)Example of google-plus-officialExample of google-plus-squareExample of google-walletExample of gratipayExample of hacker-newsExample of houzzExample of html5Example of instagramExample of internet-explorerExample of ioxhostExample of joomlaExample of jsfiddleExample of lastfmExample of lastfm-squareExample of leanpubExample of linkedinExample of linkedin-squareExample of linuxExample of maxcdnExample of meanpathExample of mediumExample of mixcloudExample of modxExample of odnoklassnikiExample of odnoklassniki-squareExample of opencartExample of openidExample of operaExample of optin-monsterExample of pagelinesExample of paypalExample of pied-piperExample of pied-piper-altExample of pied-piper-ppExample of pinterestExample of pinterest-pExample of pinterest-squareExample of product-huntExample of qqExample of ra (alias)Example of rebelExample of redditExample of reddit-alienExample of reddit-squareExample of renrenExample of resistance (alias)Example of safariExample of scribdExample of sellsyExample of share-altExample of share-alt-squareExample of shirtsinbulkExample of simplybuiltExample of skyatlasExample of skypeExample of slackExample of slideshareExample of snapchatExample of snapchat-ghostExample of snapchat-squareExample of soundcloudExample of spotifyExample of stack-exchangeExample of stack-overflowExample of steamExample of steam-squareExample of stumbleuponExample of stumbleupon-circleExample of tencent-weiboExample of themeisleExample of trelloExample of tripadvisorExample of tumblrExample of tumblr-squareExample of twitchExample of twitterExample of twitter-squareExample of usbExample of viacoinExample of viadeoExample of viadeo-squareExample of vimeoExample of vimeo-squareExample of vineExample of vkExample of wechat (alias)Example of weiboExample of weixinExample of whatsappExample of wikipedia-wExample of windowsExample of wordpressExample of wpbeginnerExample of wpformsExample of xingExample of xing-squareExample of y-combinatorExample of y-combinator-square (alias)Example of yahooExample of yc (alias)Example of yc-square (alias)Example of yelpExample of yoastExample of youtubeExample of youtube-playExample of youtube-square- All brand icons are trademarks of their respective owners.
- The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
- Brand icons should only be used to represent the company or product to which they refer.
Medical Icons
Example of heart-oExample of heartbeatExample of hospital-oExample of medkitExample of plus-squareExample of stethoscopeExample of user-mdExample of wheelchair -
Note: These icons work great with the
Icons Usage
-
How to use
All icons require an
<i>
tag with a unique class, prefixed withicon-
. To use, place the following code just about anywhere:<i class="icon-search"></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.
Using icons in Joomla menus
The template allows you to add icons to Joomla output menu items by adding
icon-name
to the Link CSS Style parameter, found in the Link Type Options tab of the link (you must leave a trailing space at the beginning).If you wish to hide the text link and use an icon only, you can add the class
hidden-text
to the Link CSS Style field after theicon-name
class. The Home link of this demo for example has a Link CSS Style oficon-home hidden-text
.
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"></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>
Button sizes
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
Navigation
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home"></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
<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> </div>