removing glyphicons images, swapping in new icon font with new classes

Makefile

@@ -22,7 +22,7 @@ build:
 	@recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE}
 	@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"
@@ -63,10 +63,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
 	recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css

docs/assets/css/docs.css

@@ -528,7 +528,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);
 }
 
@@ -783,21 +787,22 @@ form.bs-docs-example {
           box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 }
 /* 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 > li > a:hover {
   background-color: #f5f5f5;
 }
-.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

@@ -67,9 +67,8 @@
 }
 
 
-
 // Button Sizes
-// --------------------------------------------------
+// -------------------------
 
 // Large
 .btn-large {
@@ -77,10 +76,6 @@
   font-size: @fontSizeLarge;
   .border-radius(@borderRadiusLarge);
 }
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
-  margin-top: 2px;
-}
 
 // Small
 .btn-small {
@@ -88,10 +83,6 @@
   font-size: @fontSizeSmall;
   .border-radius(@borderRadiusSmall);
 }
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
-  margin-top: 0;
-}
 
 // Mini
 .btn-mini {
@@ -101,6 +92,14 @@
 }
 
 
+// Icons in buttons
+// -------------------------
+
+.btn-large [class^="glyphicon-"]::before { font-size: 14px; }
+.btn-small [class^="glyphicon-"]::before { font-size: 10px; }
+.btn-mini [class^="glyphicon-"]::before  { font-size: 9px; }
+
+
 // 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

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