Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.
-
-
-
glyphicon-glass
-
glyphicon-music
-
glyphicon-search
-
glyphicon-envelope
-
glyphicon-heart
-
glyphicon-star
-
glyphicon-star-empty
-
glyphicon-user
-
glyphicon-film
-
glyphicon-th-large
-
glyphicon-th
-
glyphicon-th-list
-
glyphicon-ok
-
glyphicon-remove
-
glyphicon-zoom-in
-
glyphicon-zoom-out
-
glyphicon-off
-
glyphicon-signal
-
glyphicon-cog
-
glyphicon-trash
-
glyphicon-home
-
glyphicon-file
-
glyphicon-time
-
glyphicon-road
-
glyphicon-download-alt
-
glyphicon-download
-
glyphicon-upload
-
glyphicon-inbox
-
-
glyphicon-play-circle
-
glyphicon-repeat
-
glyphicon-refresh
-
glyphicon-list-alt
-
glyphicon-lock
-
glyphicon-flag
-
glyphicon-headphones
-
glyphicon-volume-off
-
glyphicon-volume-down
-
glyphicon-volume-up
-
glyphicon-qrcode
-
glyphicon-barcode
-
glyphicon-tag
-
glyphicon-tags
-
glyphicon-book
-
glyphicon-bookmark
-
glyphicon-print
-
glyphicon-camera
-
glyphicon-font
-
glyphicon-bold
-
glyphicon-italic
-
glyphicon-text-height
-
glyphicon-text-width
-
glyphicon-align-left
-
glyphicon-align-center
-
glyphicon-align-right
-
glyphicon-align-justify
-
glyphicon-list
-
-
glyphicon-indent-left
-
glyphicon-indent-right
-
glyphicon-facetime-video
-
glyphicon-picture
-
glyphicon-pencil
-
glyphicon-map-marker
-
glyphicon-adjust
-
glyphicon-tint
-
glyphicon-edit
-
glyphicon-share
-
glyphicon-check
-
glyphicon-move
-
glyphicon-step-backward
-
glyphicon-fast-backward
-
glyphicon-backward
-
glyphicon-play
-
glyphicon-pause
-
glyphicon-stop
-
glyphicon-forward
-
glyphicon-fast-forward
-
glyphicon-step-forward
-
glyphicon-eject
-
glyphicon-chevron-left
-
glyphicon-chevron-right
-
glyphicon-plus-sign
-
glyphicon-minus-sign
-
glyphicon-remove-sign
-
glyphicon-ok-sign
-
-
glyphicon-question-sign
-
glyphicon-info-sign
-
glyphicon-screenshot
-
glyphicon-remove-circle
-
glyphicon-ok-circle
-
glyphicon-ban-circle
-
glyphicon-arrow-left
-
glyphicon-arrow-right
-
glyphicon-arrow-up
-
glyphicon-arrow-down
-
glyphicon-share-alt
-
glyphicon-resize-full
-
glyphicon-resize-small
-
glyphicon-plus
-
glyphicon-minus
-
glyphicon-asterisk
-
glyphicon-exclamation-sign
-
glyphicon-gift
-
glyphicon-leaf
-
glyphicon-fire
-
glyphicon-eye-open
-
glyphicon-eye-close
-
glyphicon-warning-sign
-
glyphicon-plane
-
glyphicon-calendar
-
glyphicon-random
-
glyphicon-comment
-
glyphicon-magnet
-
-
glyphicon-chevron-up
-
glyphicon-chevron-down
-
glyphicon-retweet
-
glyphicon-shopping-cart
-
glyphicon-folder-close
-
glyphicon-folder-open
-
glyphicon-resize-vertical
-
glyphicon-resize-horizontal
-
glyphicon-hdd
-
glyphicon-bullhorn
-
glyphicon-bell
-
glyphicon-certificate
-
glyphicon-thumbs-up
-
glyphicon-thumbs-down
-
glyphicon-hand-right
-
glyphicon-hand-left
-
glyphicon-hand-up
-
glyphicon-hand-down
-
glyphicon-circle-arrow-right
-
glyphicon-circle-arrow-left
-
glyphicon-circle-arrow-up
-
glyphicon-circle-arrow-down
-
glyphicon-globe
-
glyphicon-wrench
-
glyphicon-tasks
-
glyphicon-filter
-
glyphicon-briefcase
-
glyphicon-fullscreen
-
-
glyphicon-dashboard
-
glyphicon-paperclip
-
glyphicon-heart-empty
-
glyphicon-link
-
glyphicon-phone
-
glyphicon-pushpin
-
glyphicon-euro
-
glyphicon-usd
-
glyphicon-gbp
-
glyphicon-sort
-
glyphicon-sort-by-alphabet
-
glyphicon-sort-by-alphabet-alt
-
glyphicon-sort-by-order
-
glyphicon-sort-by-order-alt
-
glyphicon-sort-by-attributes
-
glyphicon-sort-by-attributes-alt
-
glyphicon-unchecked
-
glyphicon-expand
-
glyphicon-collapse
-
glyphicon-collapse-top
-
-
-
-
Glyphicons attribution
-
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
-
-
-
How to use
-
Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
-{% highlight html %}
-
-{% endhighlight %}
-
Want to change the icon color? Just change the color of the parent element.
-
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
-
-
-
Icon examples
-
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
-
-
Buttons
-
-
Button group in a button toolbar
-
-
-
-
-
-
-
-
-
-
-{% highlight html %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
Accessibility
-
Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.
@@ -558,10 +243,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
Make a set of buttons appear vertically stacked rather than horizontally.
-
-
-
-
+
+
+
+
{% highlight html %}
diff --git a/docs/css.html b/docs/css.html
index 9c85d35f68..95295a359c 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -57,6 +57,20 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
+
+
+
+
Glyphicons
+
+
With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.