From 72198a59c056857d93d35b5e3251b1baf8b5ab1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Nov 2012 01:20:06 -0700 Subject: removing glyphicons images, swapping in new icon font with new classes --- docs/base-css.html | 396 ++++++++++++++++++++++++++++------------------------- 1 file changed, 208 insertions(+), 188 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 4d27a6d69..d2ba3f133 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -86,13 +86,13 @@
@@ -1773,177 +1773,197 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->
-

Icons by Glyphicons

+

Icons font by Glyphicons

-

Icon glyphs

-

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

+

Included glyphs

+

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

+
    -
  • icon-glass
    • -
  • icon-music
    • -
  • icon-search
    • -
  • icon-envelope
    • -
  • icon-heart
    • -
  • icon-star
    • -
  • icon-star-empty
    • -
  • icon-user
    • -
  • icon-film
    • -
  • icon-th-large
    • -
  • icon-th
    • -
  • icon-th-list
    • -
  • icon-ok
    • -
  • icon-remove
    • -
  • icon-zoom-in
    • -
  • icon-zoom-out
    • -
  • icon-off
    • -
  • icon-signal
    • -
  • icon-cog
    • -
  • icon-trash
    • -
  • icon-home
    • -
  • icon-file
    • -
  • icon-time
    • -
  • icon-road
    • -
  • icon-download-alt
    • -
  • icon-download
    • -
  • icon-upload
    • -
  • icon-inbox
    • - -
  • icon-play-circle
    • -
  • icon-repeat
    • -
  • icon-refresh
    • -
  • icon-list-alt
    • -
  • icon-lock
    • -
  • icon-flag
    • -
  • icon-headphones
    • -
  • icon-volume-off
    • -
  • icon-volume-down
    • -
  • icon-volume-up
    • -
  • icon-qrcode
    • -
  • icon-barcode
    • -
  • icon-tag
    • -
  • icon-tags
    • -
  • icon-book
    • -
  • icon-bookmark
    • -
  • icon-print
    • -
  • icon-camera
    • -
  • icon-font
    • -
  • icon-bold
    • -
  • icon-italic
    • -
  • icon-text-height
    • -
  • icon-text-width
    • -
  • icon-align-left
    • -
  • icon-align-center
    • -
  • icon-align-right
    • -
  • icon-align-justify
    • -
  • icon-list
    • - -
  • icon-indent-left
    • -
  • icon-indent-right
    • -
  • icon-facetime-video
    • -
  • icon-picture
    • -
  • icon-pencil
    • -
  • icon-map-marker
    • -
  • icon-adjust
    • -
  • icon-tint
    • -
  • icon-edit
    • -
  • icon-share
    • -
  • icon-check
    • -
  • icon-move
    • -
  • icon-step-backward
    • -
  • icon-fast-backward
    • -
  • icon-backward
    • -
  • icon-play
    • -
  • icon-pause
    • -
  • icon-stop
    • -
  • icon-forward
    • -
  • icon-fast-forward
    • -
  • icon-step-forward
    • -
  • icon-eject
    • -
  • icon-chevron-left
    • -
  • icon-chevron-right
    • -
  • icon-plus-sign
    • -
  • icon-minus-sign
    • -
  • icon-remove-sign
    • -
  • icon-ok-sign
    • - -
  • icon-question-sign
    • -
  • icon-info-sign
    • -
  • icon-screenshot
    • -
  • icon-remove-circle
    • -
  • icon-ok-circle
    • -
  • icon-ban-circle
    • -
  • icon-arrow-left
    • -
  • icon-arrow-right
    • -
  • icon-arrow-up
    • -
  • icon-arrow-down
    • -
  • icon-share-alt
    • -
  • icon-resize-full
    • -
  • icon-resize-small
    • -
  • icon-plus
    • -
  • icon-minus
    • -
  • icon-asterisk
    • -
  • icon-exclamation-sign
    • -
  • icon-gift
    • -
  • icon-leaf
    • -
  • icon-fire
    • -
  • icon-eye-open
    • -
  • icon-eye-close
    • -
  • icon-warning-sign
    • -
  • icon-plane
    • -
  • icon-calendar
    • -
  • icon-random
    • -
  • icon-comment
    • -
  • icon-magnet
    • - -
  • icon-chevron-up
    • -
  • icon-chevron-down
    • -
  • icon-retweet
    • -
  • icon-shopping-cart
    • -
  • icon-folder-close
    • -
  • icon-folder-open
    • -
  • icon-resize-vertical
    • -
  • icon-resize-horizontal
    • -
  • icon-hdd
    • -
  • icon-bullhorn
    • -
  • icon-bell
    • -
  • icon-certificate
    • -
  • icon-thumbs-up
    • -
  • icon-thumbs-down
    • -
  • icon-hand-right
    • -
  • icon-hand-left
    • -
  • icon-hand-up
    • -
  • icon-hand-down
    • -
  • icon-circle-arrow-right
    • -
  • icon-circle-arrow-left
    • -
  • icon-circle-arrow-up
    • -
  • icon-circle-arrow-down
    • -
  • icon-globe
    • -
  • icon-wrench
    • -
  • icon-tasks
    • -
  • icon-filter
    • -
  • icon-briefcase
    • -
  • icon-fullscreen
    • +
  • 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 creators 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.

+

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

-

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

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

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

+

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:

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

Want to change the icon color? Just change the color of the parent element.

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. + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

@@ -1959,10 +1979,10 @@ For example, <code><section></code> should be wrapped as inlin
- - - - + + + +
@@ -1970,10 +1990,10 @@ For example, <code><section></code> should be wrapped as inlin <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> + <a class="btn" href="#"><i class="glyphicon-align-left"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-center"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-right"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a> </div> </div> @@ -1981,12 +2001,12 @@ For example, <code><section></code> should be wrapped as inlin
Dropdown in a button group
- User + User @@ -1994,12 +2014,12 @@ For example, <code><section></code> should be wrapped as inlin 
 <div class="btn-group">
-  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+  <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+    <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>
@@ -2008,10 +2028,10 @@ For example, <code><section></code> should be wrapped as inlin
 
           
Small button

           

-            
+            
           

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

 
 
@@ -2019,18 +2039,18 @@ For example, <code><section></code> should be wrapped as inlin
           

             

               
             

           

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

@@ -2041,7 +2061,7 @@ For example, <code><section></code> should be wrapped as inlin
               
               

                 

-                  
+
@@ -2051,7 +2071,7 @@ For example, <code><section></code> should be wrapped as inlin <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> + <span class="add-on"><i class="glyphicon-envelope"></i></span> <input class="span2" id="inputIcon" type="text"> </div> </div> -- cgit v1.2.3