Merge branch 'glyphicons_font' into exploratory

Conflicts:
	docs/assets/css/bootstrap.css
	docs/assets/css/docs.css
	less/sprites.less

Makefile

@@ -19,7 +19,7 @@ build:
 	@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
 	@echo "Compiling LESS with Recess...               ${CHECK} Done"
 	@node docs/build
-	@cp img/* docs/assets/img/
+	@cp fonts/* docs/assets/fonts/
 	@cp js/*.js docs/assets/js/
 	@cp js/tests/vendor/jquery.js docs/assets/js/
 	@echo "Compiling documentation...                  ${CHECK} Done"
@@ -60,10 +60,10 @@ clean:
 #
 
 bootstrap:
-	mkdir -p bootstrap/img
+	mkdir -p bootstrap/fonts
 	mkdir -p bootstrap/css
 	mkdir -p bootstrap/js
-	cp img/* bootstrap/img/
+	cp fonts/* bootstrap/fonts/
 	recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
 	recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
 	cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js

docs/assets/css/docs.css

@@ -536,7 +536,11 @@ h2 + .row {
   width: 25%;
   line-height: 25px;
 }
-.the-icons i:hover {
+.the-icons [class^="glyphicon-"] {
+  vertical-align: middle;
+  margin-right: 3px;
+}
+.the-icons li:hover [class^="glyphicon-"] {
   background-color: rgba(255,0,0,.25);
 }
 
@@ -756,18 +760,19 @@ form.bs-docs-example {
   margin: 30px 0 0;
 }
 /* Chevrons */
-.bs-docs-sidenav .icon-chevron-right {
+.bs-docs-sidenav .glyphicon-chevron-right {
   float: right;
-  margin-top: 2px;
+  margin-top: -2px;
   margin-right: -6px;
   opacity: .25;
+  color: #000;
 }
-.bs-docs-sidenav a:hover .icon-chevron-right {
+.bs-docs-sidenav a:hover .glyphicon-chevron-right {
   opacity: .5;
 }
-.bs-docs-sidenav .active .icon-chevron-right,
-.bs-docs-sidenav .active a:hover .icon-chevron-right {
-  background-image: url(../img/glyphicons-halflings-white.png);
+.bs-docs-sidenav .active .glyphicon-chevron-right,
+.bs-docs-sidenav .active a:hover .glyphicon-chevron-right {
+  color: #fff;
   opacity: 1;
 }
 .bs-docs-sidenav.affix {

less/bootstrap.less

@@ -27,7 +27,7 @@
 @import "tables.less";
 
 // Components: common
-@import "sprites.less";
+@import "glyphicons.less";
 @import "dropdowns.less";
 @import "wells.less";
 @import "component-animations.less";

less/buttons.less

@@ -62,9 +62,8 @@
 }
 
 
-
 // Button Sizes
-// --------------------------------------------------
+// -------------------------
 
 // Large
 .btn-large {
@@ -72,10 +71,6 @@
   font-size: @fontSizeLarge;
   border-radius: @borderRadiusLarge;
 }
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
-  margin-top: 2px;
-}
 
 // Small
 .btn-small {
@@ -83,10 +78,6 @@
   font-size: @fontSizeSmall;
   border-radius: @borderRadiusSmall;
 }
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
-  margin-top: 0;
-}
 
 // Mini
 .btn-mini {
@@ -96,6 +87,14 @@
 }
 
 
+// Icons in buttons
+// -------------------------
+
+.btn [class^="glyphicon-"]::before       { vertical-align: -2px; }
+.btn-small [class^="glyphicon-"]::before,
+.btn-mini [class^="glyphicon-"]::before  { vertical-align: -1px; }
+
+
 // Block button
 // -------------------------
 

less/tests/buttons.html

@@ -34,6 +34,77 @@
 
     <div class="container">
 
+      <h2>Icons in buttons</h2>
+      <p>
+        <button class="btn btn-large" type="button">
+          Profile
+        </button>
+        <button class="btn btn-large" type="button">
+          <span class="glyphicon-user"></span> Profile
+        </button>
+        <button class="btn btn-large" type="button">
+          <span class="glyphicon-home"></span> Home
+        </button>
+        <button class="btn btn-large" type="button">
+          <span class="glyphicon-link"></span> Link
+        </button>
+      </p>
+      <p>
+        <button class="btn" type="button">
+          Profile
+        </button>
+        <button class="btn" type="button">
+          <span class="glyphicon-user"></span> Profile
+        </button>
+        <button class="btn" type="button">
+          <span class="glyphicon-home"></span> Home
+        </button>
+        <button class="btn" type="button">
+          <span class="glyphicon-link"></span> Link
+        </button>
+      </p>
+      <p>
+        <button class="btn btn-small" type="button">
+          Profile
+        </button>
+        <button class="btn btn-small" type="button">
+          <span class="glyphicon-user"></span> Profile
+        </button>
+        <button class="btn btn-small" type="button">
+          <span class="glyphicon-home"></span> Home
+        </button>
+        <button class="btn btn-small" type="button">
+          <span class="glyphicon-link"></span> Link
+        </button>
+      </p>
+      <p>
+        <button class="btn btn-mini" type="button">
+          Profile
+        </button>
+        <button class="btn btn-mini" type="button">
+          <span class="glyphicon-user"></span> Profile
+        </button>
+        <button class="btn btn-mini" type="button">
+          <span class="glyphicon-home"></span> Home
+        </button>
+        <button class="btn btn-mini" type="button">
+          <span class="glyphicon-link"></span> Link
+        </button>
+      </p>
+
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <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>
+
+
+      <hr>
+
+
       <h2>Dropups</h2>
       <div class="btn-toolbar">
         <div class="btn-group dropup">

less/variables.less

@@ -66,7 +66,7 @@
 
 @paddingLarge:          11px 19px; // 44px
 @paddingSmall:          2px 10px;  // 26px
-@paddingMini:           1px 6px;   // 24px
+@paddingMini:           0 6px;   // 24px
 
 @baseBorderRadius:      4px;
 @borderRadiusLarge:     6px;