1. Home
  2. globals
  3. Accessibility

Accessibility

Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using AT.

Skip navigation

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link before the navigation (for a simple explanation, see this A11Y Project article on skip navigation links). Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).


<body>
  <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Nested headings

When nesting headings (<h1> - <h6>), your primary document header should be an <h1>. Subsequent headings should make logical use of <h2> - <h6> such that screen readers can construct a table of contents for your pages.

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Color contrast

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Additional resources

  1. Home
  2. globals
  3. browser-device-support

Browser and device support

Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

Supported browsers

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 8-11. More specific support information is provided below.

Chrome Firefox Internet Explorer Opera Safari
Android Supported Supported N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Not Supported

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file://

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and @import

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 and box-sizing

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

IE Compatibility modes

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:


<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:


@-ms-viewport       { width: device-width; }

However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.


@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

Safari percent rounding

The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

  • Add .pull-right to your last grid column to get the hard-right alignment
  • Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)

Modals, navbars, and virtual keyboards

Overflow and scrolling

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll. See WebKit bug #153852.

Virtual keyboards

Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Navbar Dropdowns

The .dropdown-backdrop element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

Sticky :hover/:focus on mobile

Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover "sticky". In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's :hover states to become unwantedly "stuck" on such browsers. Some mobile browsers also make :focus similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.

Printing

Even in some modern browsers, printing can be quirky.

In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

  • Embrace the extra-small grid and make sure your page looks acceptable under it.
  • Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
  • Add custom media queries to change the grid size breakpoints for print media only.

Also, as of Safari v8.0, fixed-width .containers can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS:


@media print {
  .container {
    width: auto;
  }
}

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menus

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.


<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Want to see an example? Check out this JS Bin demo.

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.

  1. Home
  2. globals
  3. Disabling-responsiveness

Disabling responsiveness

Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like this non-responsive example.

Steps to disable page responsiveness

  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

Bootstrap template with responsiveness disabled

We've applied these steps to an example. Read its source code to see the specific changes implemented.

View non-responsive example

  1. Home
  2. globals
  3. Colors

Color Pallete

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

Gray Colors

@black
@gray-darker
@gray-dark
@gray
@gray-light
@gray-lighter
@white

Brand Colors

@brand-primary
@brand-secondary
@brand-success
@brand-info
@brand-warning
@brand-danger

Transparent Background

@subtletransparentblack
@transparentblack
@strongtransparentblack
@verystrongtransparentblack
@subtletransparentwhite
@transparentwhite
@strongtransparentwhite
@subtlegradient

Color Palette

@red-50
@red-100
@red-200
@red-300
@red-400
@red-500
@red-600
@red-700
@red-800
@red-900
@red-A100
@red-A200
@red-A400
@red-A700
@red
@pink-50
@pink-100
@pink-200
@pink-300
@pink-400
@pink-500
@pink-600
@pink-700
@pink-800
@pink-900
@pink-A100
@pink-A200
@pink-A400
@pink-A700
@pink
@purple-50
@purple-100
@purple-200
@purple-300
@purple-400
@purple-500
@purple-600
@purple-700
@purple-800
@purple-900
@purple-A100
@purple-A200
@purple-A400
@purple-A700
@purple
@deep-purple-50
@deep-purple-100
@deep-purple-200
@deep-purple-300
@deep-purple-400
@deep-purple-500
@deep-purple-600
@deep-purple-700
@deep-purple-800
@deep-purple-900
@deep-purple-A100
@deep-purple-A200
@deep-purple-A400
@deep-purple-A700
@deep-purple
@indigo-50
@indigo-100
@indigo-200
@indigo-300
@indigo-400
@indigo-500
@indigo-600
@indigo-700
@indigo-800
@indigo-900
@indigo-A100
@indigo-A200
@indigo-A400
@indigo-A700
@indigo
@blue-50
@blue-100
@blue-200
@blue-300
@blue-400
@blue-500
@blue-600
@blue-700
@blue-800
@blue-900
@blue-A100
@blue-A200
@blue-A400
@blue-A700
@blue
@light-blue-50
@light-blue-100
@light-blue-200
@light-blue-300
@light-blue-400
@light-blue-500
@light-blue-600
@light-blue-700
@light-blue-800
@light-blue-900
@light-blue-A100
@light-blue-A200
@light-blue-A400
@light-blue-A700
@cyan-50
@cyan-100
@cyan-200
@cyan-300
@cyan-400
@cyan-500
@cyan-600
@cyan-700
@cyan-800
@cyan-900
@cyan-A100
@cyan-A200
@cyan-A400
@cyan-A700
@cyan
@teal-50
@teal-100
@teal-200
@teal-300
@teal-400
@teal-500
@teal-600
@teal-700
@teal-800
@teal-900
@teal-A100
@teal-A200
@teal-A400
@teal-A700
@teal
@green-50
@green-100
@green-200
@green-300
@green-400
@green-500
@green-600
@green-700
@green-800
@green-900
@green-A100
@green-A200
@green-A400
@green-A700
@green-A700
@green
@light-green-50
@light-green-100
@light-green-200
@light-green-300
@light-green-400
@light-green-500
@light-green-600
@light-green-700
@light-green-800
@light-green-900
@light-green-A100
@light-green-A200
@light-green-A400
@light-green-A700
@lime-50
@lime-100
@lime-200
@lime-300
@lime-400
@lime-500
@lime-600
@lime-700
@lime-800
@lime-900
@lime-A100
@lime-A200
@lime-A400
@lime-A700
@lime
@yellow-50
@yellow-100
@yellow-200
@yellow-300
@yellow-400
@yellow-500
@yellow-600
@yellow-700
@yellow-800
@yellow-900
@yellow-A100
@yellow-A200
@yellow-A400
@yellow-A700
@yellow
@amber-50
@amber-100
@amber-200
@amber-300
@amber-400
@amber-500
@amber-600
@amber-700
@amber-800
@amber-900
@amber-A100
@amber-A200
@amber-A400
@amber-A700
@amber
@orange-50
@orange-100
@orange-200
@orange-300
@orange-400
@orange-500
@orange-600
@orange-700
@orange-800
@orange-900
@orange-A100
@orange-A200
@orange-A400
@orange-A700
@orange
@deep-orange-50
@deep-orange-100
@deep-orange-200
@deep-orange-300
@deep-orange-400
@deep-orange-500
@deep-orange-600
@deep-orange-700
@deep-orange-800
@deep-orange-900
@deep-orange-A100
@deep-orange-A200
@deep-orange-A400
@deep-orange-A700
@deep-orange
@brown-50
@brown-100
@brown-200
@brown-300
@brown-400
@brown-500
@brown-600
@brown-700
@brown-800
@brown-900
@brown-A100
@brown-A200
@brown-A400
@brown-A700
@brown
@grey-50
@grey-100
@grey-200
@grey-300
@grey-400
@grey-500
@grey-600
@grey-700
@grey-800
@grey-900
@grey-A100
@grey-A200
@grey-A400
@grey-A700
@blue-grey-50
@blue-grey-100
@blue-grey-200
@blue-grey-300
@blue-grey-400
@blue-grey-500
@blue-grey-600
@blue-grey-700
@blue-grey-800
@blue-grey-900
@blue-grey-A100
@blue-grey-A200
@blue-grey-A400
@blue-grey-A700
@blue-grey
@olive
@violet
@gray07
@gray13
@gray15
@gray20
@gray27
@gray33
@gray40
@gray46
@gray47
@gray53
@gray54
@gray67
@gray74
@gray80
@gray87
@gray90
@gray93
@gray96
@gray98
@gray99
@black-10
@black-20
@black-30
@black-40
@black-50
@black-60
@black-70
@black-80
@black-90

Media Colors

@facebookColor
@twitterColor
@googlePlusColor
@linkedInColor
@youtubeColor
@instagramColor
@pinterestColor
  1. Home
  2. globals
  3. Glyphicons

Glyphicons

Available glyphs

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> or <i> and apply the icon classes to the <span> or <i>.

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Changing the icon font location

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
  • Utilize the relative URLs option provided by the Less compiler.
  • Change the url() paths in the compiled CSS.

Use whatever option best suits your specific development setup.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.


<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Examples

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


<button class="btn btn-default" type="button" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button class="btn btn-default btn-lg" type="button">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

An icon used in an alert to convey that it's an error message, with additional .sr-only text to convey this hint to users of assistive technologies.


<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>
  1. Home
  2. globals
  3. icons

Icons

Available icons from Font Awesome

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

  • fa fa-glass
  • fa fa-music
  • fa fa-search
  • fa fa-envelope-o
  • fa fa-heart
  • fa fa-star
  • fa fa-star-o
  • fa fa-user
  • fa fa-film
  • fa fa-th-large
  • fa fa-th
  • fa fa-th-list
  • fa fa-check
  • fa fa-times
  • fa fa-search-plus
  • fa fa-search-minus
  • fa fa-power-off
  • fa fa-signal
  • fa fa-cog
  • fa fa-trash-o
  • fa fa-home
  • fa fa-file-o
  • fa fa-clock-o
  • fa fa-road
  • fa fa-download
  • fa fa-arrow-circle-o-down
  • fa fa-arrow-circle-o-up
  • fa fa-inbox
  • fa fa-play-circle-o
  • fa fa-repeat
  • fa fa-refresh
  • fa fa-list-alt
  • fa fa-lock
  • fa fa-flag
  • fa fa-headphones
  • fa fa-volume-off
  • fa fa-volume-down
  • fa fa-volume-up
  • fa fa-qrcode
  • fa fa-barcode
  • fa fa-tag
  • fa fa-tags
  • fa fa-book
  • fa fa-bookmark
  • fa fa-print
  • fa fa-camera
  • fa fa-font
  • fa fa-bold
  • fa fa-italic
  • fa fa-text-height
  • fa fa-text-width
  • fa fa-align-left
  • fa fa-align-center
  • fa fa-align-right
  • fa fa-align-justify
  • fa fa-list
  • fa fa-outdent
  • fa fa-indent
  • fa fa-video-camera
  • fa fa-picture-o
  • fa fa-pencil
  • fa fa-map-marker
  • fa fa-adjust
  • fa fa-tint
  • fa fa-pencil-square-o
  • fa fa-share-square-o
  • fa fa-check-square-o
  • fa fa-arrows
  • fa fa-step-backward
  • fa fa-fast-backward
  • fa fa-backward
  • fa fa-play
  • fa fa-pause
  • fa fa-stop
  • fa fa-forward
  • fa fa-fast-forward
  • fa fa-step-forward
  • fa fa-eject
  • fa fa-chevron-left
  • fa fa-chevron-right
  • fa fa-plus-circle
  • fa fa-minus-circle
  • fa fa-times-circle
  • fa fa-check-circle
  • fa fa-question-circle
  • fa fa-info-circle
  • fa fa-crosshairs
  • fa fa-times-circle-o
  • fa fa-check-circle-o
  • fa fa-ban
  • fa fa-arrow-left
  • fa fa-arrow-right
  • fa fa-arrow-up
  • fa fa-arrow-down
  • fa fa-share
  • fa fa-expand
  • fa fa-compress
  • fa fa-plus
  • fa fa-minus
  • fa fa-asterisk
  • fa fa-exclamation-circle
  • fa fa-gift
  • fa fa-leaf
  • fa fa-fire
  • fa fa-eye
  • fa fa-eye-slash
  • fa fa-exclamation-triangle
  • fa fa-plane
  • fa fa-calendar
  • fa fa-random
  • fa fa-comment
  • fa fa-magnet
  • fa fa-chevron-up
  • fa fa-chevron-down
  • fa fa-retweet
  • fa fa-shopping-cart
  • fa fa-folder
  • fa fa-folder-open
  • fa fa-arrows-v
  • fa fa-arrows-h
  • fa fa-bar-chart
  • fa fa-twitter-square
  • fa fa-facebook-square
  • fa fa-camera-retro
  • fa fa-key
  • fa fa-cogs
  • fa fa-comments
  • fa fa-thumbs-o-up
  • fa fa-thumbs-o-down
  • fa fa-star-half
  • fa fa-heart-o
  • fa fa-sign-out
  • fa fa-linkedin-square
  • fa fa-thumb-tack
  • fa fa-external-link
  • fa fa-sign-in
  • fa fa-trophy
  • fa fa-github-square
  • fa fa-upload
  • fa fa-lemon-o
  • fa fa-phone
  • fa fa-square-o
  • fa fa-bookmark-o
  • fa fa-phone-square
  • fa fa-twitter
  • fa fa-facebook
  • fa fa-github
  • fa fa-unlock
  • fa fa-credit-card
  • fa fa-rss
  • fa fa-hdd-o
  • fa fa-bullhorn
  • fa fa-bell
  • fa fa-certificate
  • fa fa-hand-o-right
  • fa fa-hand-o-left
  • fa fa-hand-o-up
  • fa fa-hand-o-down
  • fa fa-arrow-circle-left
  • fa fa-arrow-circle-right
  • fa fa-arrow-circle-up
  • fa fa-arrow-circle-down
  • fa fa-globe
  • fa fa-wrench
  • fa fa-tasks
  • fa fa-filter
  • fa fa-briefcase
  • fa fa-arrows-alt
  • fa fa-users
  • fa fa-link
  • fa fa-cloud
  • fa fa-flask
  • fa fa-scissors
  • fa fa-files-o
  • fa fa-paperclip
  • fa fa-floppy-o
  • fa fa-square
  • fa fa-bars
  • fa fa-list-ul
  • fa fa-list-ol
  • fa fa-strikethrough
  • fa fa-underline
  • fa fa-table
  • fa fa-magic
  • fa fa-truck
  • fa fa-pinterest
  • fa fa-pinterest-square
  • fa fa-google-plus-square
  • fa fa-google-plus
  • fa fa-money
  • fa fa-caret-down
  • fa fa-caret-up
  • fa fa-caret-left
  • fa fa-caret-right
  • fa fa-columns
  • fa fa-sort
  • fa fa-sort-desc
  • fa fa-sort-asc
  • fa fa-envelope
  • fa fa-linkedin
  • fa fa-undo
  • fa fa-gavel
  • fa fa-tachometer
  • fa fa-comment-o
  • fa fa-comments-o
  • fa fa-bolt
  • fa fa-sitemap
  • fa fa-umbrella
  • fa fa-clipboard
  • fa fa-lightbulb-o
  • fa fa-exchange
  • fa fa-cloud-download
  • fa fa-cloud-upload
  • fa fa-user-md
  • fa fa-stethoscope
  • fa fa-suitcase
  • fa fa-bell-o
  • fa fa-coffee
  • fa fa-cutlery
  • fa fa-file-text-o
  • fa fa-building-o
  • fa fa-hospital-o
  • fa fa-ambulance
  • fa fa-medkit
  • fa fa-fighter-jet
  • fa fa-beer
  • fa fa-h-square
  • fa fa-plus-square
  • fa fa-angle-double-left
  • fa fa-angle-double-right
  • fa fa-angle-double-up
  • fa fa-angle-double-down
  • fa fa-angle-left
  • fa fa-angle-right
  • fa fa-angle-up
  • fa fa-angle-down
  • fa fa-desktop
  • fa fa-laptop
  • fa fa-tablet
  • fa fa-mobile
  • fa fa-circle-o
  • fa fa-quote-left
  • fa fa-quote-right
  • fa fa-spinner
  • fa fa-circle
  • fa fa-reply
  • fa fa-github-alt
  • fa fa-folder-o
  • fa fa-folder-open-o
  • fa fa-smile-o
  • fa fa-frown-o
  • fa fa-meh-o
  • fa fa-gamepad
  • fa fa-keyboard-o
  • fa fa-flag-o
  • fa fa-flag-checkered
  • fa fa-terminal
  • fa fa-code
  • fa fa-reply-all
  • fa fa-star-half-o
  • fa fa-location-arrow
  • fa fa-crop
  • fa fa-code-fork
  • fa fa-chain-broken
  • fa fa-question
  • fa fa-info
  • fa fa-exclamation
  • fa fa-superscript
  • fa fa-subscript
  • fa fa-eraser
  • fa fa-puzzle-piece
  • fa fa-microphone
  • fa fa-microphone-slash
  • fa fa-shield
  • fa fa-calendar-o
  • fa fa-fire-extinguisher
  • fa fa-rocket
  • fa fa-maxcdn
  • fa fa-chevron-circle-left
  • fa fa-chevron-circle-right
  • fa fa-chevron-circle-up
  • fa fa-chevron-circle-down
  • fa fa-html5
  • fa fa-css3
  • fa fa-anchor
  • fa fa-unlock-alt
  • fa fa-bullseye
  • fa fa-ellipsis-h
  • fa fa-ellipsis-v
  • fa fa-rss-square
  • fa fa-play-circle
  • fa fa-ticket
  • fa fa-minus-square
  • fa fa-minus-square-o
  • fa fa-level-up
  • fa fa-level-down
  • fa fa-check-square
  • fa fa-pencil-square
  • fa fa-external-link-square
  • fa fa-share-square
  • fa fa-compass
  • fa fa-caret-square-o-down
  • fa fa-caret-square-o-up
  • fa fa-caret-square-o-right
  • fa fa-eur
  • fa fa-gbp
  • fa fa-usd
  • fa fa-inr
  • fa fa-jpy
  • fa fa-rub
  • fa fa-krw
  • fa fa-btc
  • fa fa-file
  • fa fa-file-text
  • fa fa-sort-alpha-asc
  • fa fa-sort-alpha-desc
  • fa fa-sort-amount-asc
  • fa fa-sort-amount-desc
  • fa fa-sort-numeric-asc
  • fa fa-sort-numeric-desc
  • fa fa-thumbs-up
  • fa fa-thumbs-down
  • fa fa-youtube-square
  • fa fa-youtube
  • fa fa-xing
  • fa fa-xing-square
  • fa fa-youtube-play
  • fa fa-dropbox
  • fa fa-stack-overflow
  • fa fa-instagram
  • fa fa-flickr
  • fa fa-adn
  • fa fa-bitbucket
  • fa fa-bitbucket-square
  • fa fa-tumblr
  • fa fa-tumblr-square
  • fa fa-long-arrow-down
  • fa fa-long-arrow-up
  • fa fa-long-arrow-left
  • fa fa-long-arrow-right
  • fa fa-apple
  • fa fa-windows
  • fa fa-android
  • fa fa-linux
  • fa fa-dribbble
  • fa fa-skype
  • fa fa-foursquare
  • fa fa-trello
  • fa fa-female
  • fa fa-male
  • fa fa-gratipay
  • fa fa-sun-o
  • fa fa-moon-o
  • fa fa-archive
  • fa fa-bug
  • fa fa-vk
  • fa fa-weibo
  • fa fa-renren
  • fa fa-pagelines
  • fa fa-stack-exchange
  • fa fa-arrow-circle-o-right
  • fa fa-arrow-circle-o-left
  • fa fa-caret-square-o-left
  • fa fa-dot-circle-o
  • fa fa-wheelchair
  • fa fa-vimeo-square
  • fa fa-try
  • fa fa-plus-square-o
  • fa fa-space-shuttle
  • fa fa-slack
  • fa fa-envelope-square
  • fa fa-wordpress
  • fa fa-openid
  • fa fa-university
  • fa fa-graduation-cap
  • fa fa-yahoo
  • fa fa-google
  • fa fa-reddit
  • fa fa-reddit-square
  • fa fa-stumbleupon-circle
  • fa fa-stumbleupon
  • fa fa-delicious
  • fa fa-digg
  • fa fa-pied-piper
  • fa fa-pied-piper-alt
  • fa fa-drupal
  • fa fa-joomla
  • fa fa-language
  • fa fa-fax
  • fa fa-building
  • fa fa-child
  • fa fa-paw
  • fa fa-spoon
  • fa fa-cube
  • fa fa-cubes
  • fa fa-behance
  • fa fa-behance-square
  • fa fa-steam
  • fa fa-steam-square
  • fa fa-recycle
  • fa fa-car
  • fa fa-taxi
  • fa fa-tree
  • fa fa-spotify
  • fa fa-deviantart
  • fa fa-soundcloud
  • fa fa-database
  • fa fa-file-pdf-o
  • fa fa-file-word-o
  • fa fa-file-excel-o
  • fa fa-file-powerpoint-o
  • fa fa-file-image-o
  • fa fa-file-archive-o
  • fa fa-file-audio-o
  • fa fa-file-video-o
  • fa fa-file-code-o
  • fa fa-vine
  • fa fa-codepen
  • fa fa-jsfiddle
  • fa fa-life-ring
  • fa fa-circle-o-notch
  • fa fa-rebel
  • fa fa-empire
  • fa fa-git-square
  • fa fa-git
  • fa fa-hacker-news
  • fa fa-tencent-weibo
  • fa fa-qq
  • fa fa-weixin
  • fa fa-paper-plane
  • fa fa-paper-plane-o
  • fa fa-history
  • fa fa-circle-thin
  • fa fa-header
  • fa fa-paragraph
  • fa fa-sliders
  • fa fa-share-alt
  • fa fa-share-alt-square
  • fa fa-bomb
  • fa fa-futbol-o
  • fa fa-tty
  • fa fa-binoculars
  • fa fa-plug
  • fa fa-slideshare
  • fa fa-twitch
  • fa fa-yelp
  • fa fa-newspaper-o
  • fa fa-wifi
  • fa fa-calculator
  • fa fa-paypal
  • fa fa-google-wallet
  • fa fa-cc-visa
  • fa fa-cc-mastercard
  • fa fa-cc-discover
  • fa fa-cc-amex
  • fa fa-cc-paypal
  • fa fa-cc-stripe
  • fa fa-bell-slash
  • fa fa-bell-slash-o
  • fa fa-trash
  • fa fa-copyright
  • fa fa-at
  • fa fa-eyedropper
  • fa fa-paint-brush
  • fa fa-birthday-cake
  • fa fa-area-chart
  • fa fa-pie-chart
  • fa fa-line-chart
  • fa fa-lastfm
  • fa fa-lastfm-square
  • fa fa-toggle-off
  • fa fa-toggle-on
  • fa fa-bicycle
  • fa fa-bus
  • fa fa-ioxhost
  • fa fa-angellist
  • fa fa-cc
  • fa fa-ils
  • fa fa-meanpath
  • fa fa-buysellads
  • fa fa-connectdevelop
  • fa fa-dashcube
  • fa fa-forumbee
  • fa fa-leanpub
  • fa fa-sellsy
  • fa fa-shirtsinbulk
  • fa fa-simplybuilt
  • fa fa-skyatlas
  • fa fa-cart-plus
  • fa fa-cart-arrow-down
  • fa fa-diamond
  • fa fa-ship
  • fa fa-user-secret
  • fa fa-motorcycle
  • fa fa-street-view
  • fa fa-heartbeat
  • fa fa-venus
  • fa fa-mars
  • fa fa-mercury
  • fa fa-transgender
  • fa fa-transgender-alt
  • fa fa-venus-double
  • fa fa-mars-double
  • fa fa-venus-mars
  • fa fa-mars-stroke
  • fa fa-mars-stroke-v
  • fa fa-mars-stroke-h
  • fa fa-neuter
  • fa fa-genderless
  • fa fa-facebook-official
  • fa fa-pinterest-p
  • fa fa-whatsapp
  • fa fa-server
  • fa fa-user-plus
  • fa fa-user-times
  • fa fa-bed
  • fa fa-viacoin
  • fa fa-train
  • fa fa-subway
  • fa fa-medium
  • fa fa-y-combinator
  • fa fa-optin-monster
  • fa fa-opencart
  • fa fa-expeditedssl
  • fa fa-battery-full
  • fa fa-battery-three-quarters
  • fa fa-battery-half
  • fa fa-battery-quarter
  • fa fa-battery-empty
  • fa fa-mouse-pointer
  • fa fa-i-cursor
  • fa fa-object-group
  • fa fa-object-ungroup
  • fa fa-sticky-note
  • fa fa-sticky-note-o
  • fa fa-cc-jcb
  • fa fa-cc-diners-club
  • fa fa-clone
  • fa fa-balance-scale
  • fa fa-hourglass-o
  • fa fa-hourglass-start
  • fa fa-hourglass-half
  • fa fa-hourglass-end
  • fa fa-hourglass
  • fa fa-hand-rock-o
  • fa fa-hand-paper-o
  • fa fa-hand-scissors-o
  • fa fa-hand-lizard-o
  • fa fa-hand-spock-o
  • fa fa-hand-pointer-o
  • fa fa-hand-peace-o
  • fa fa-trademark
  • fa fa-registered
  • fa fa-creative-commons
  • fa fa-gg
  • fa fa-gg-circle
  • fa fa-tripadvisor
  • fa fa-odnoklassniki
  • fa fa-odnoklassniki-square
  • fa fa-get-pocket
  • fa fa-wikipedia-w
  • fa fa-safari
  • fa fa-chrome
  • fa fa-firefox
  • fa fa-opera
  • fa fa-internet-explorer
  • fa fa-television
  • fa fa-contao
  • fa fa-500px
  • fa fa-amazon
  • fa fa-calendar-plus-o
  • fa fa-calendar-minus-o
  • fa fa-calendar-times-o
  • fa fa-calendar-check-o
  • fa fa-industry
  • fa fa-map-pin
  • fa fa-map-signs
  • fa fa-map-o
  • fa fa-map
  • fa fa-commenting
  • fa fa-commenting-o
  • fa fa-houzz
  • fa fa-vimeo
  • fa fa-black-tie
  • fa fa-fonticons
  • fa fa-reddit-alien
  • fa fa-edge
  • fa fa-credit-card-alt
  • fa fa-codiepie
  • fa fa-modx
  • fa fa-fort-awesome
  • fa fa-usb
  • fa fa-product-hunt
  • fa fa-mixcloud
  • fa fa-scribd
  • fa fa-pause-circle
  • fa fa-pause-circle-o
  • fa fa-stop-circle
  • fa fa-stop-circle-o
  • fa fa-shopping-bag
  • fa fa-shopping-basket
  • fa fa-hashtag
  • fa fa-bluetooth
  • fa fa-bluetooth-b
  • fa fa-percent

Basic Icons

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
  • 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

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

  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"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

List Icons

  • 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

…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"></i>
...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.

Animated Icons

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"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

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

CSS3 animations aren't supported in IE8 - IE9.

Rotated & Flipped

  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

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

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</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-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"></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="i"></i> Make admin</a></li>
  </ul>
</div>