Fixes twbs#6148: Icons in mini buttons properly aligned

mdo · mdo · commit be45a821bb33 · 2012-12-07T09:51:01.000-08:00
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -3258,6 +3258,11 @@ button.close {
   margin-top: 0;
 }
 
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+  margin-top: -1px;
+}
+
 .btn-mini {
   padding: 0 6px;
   font-size: 10.5px;
diff --git a/docs/base-css.html b/docs/base-css.html
@@ -2078,23 +2078,18 @@ <h5>Dropdown in a button group</h5>
 &lt;/div&gt;
 </pre>
 
-          <h5>Large button</h5>
+          <h5>Button sizes</h5>
           <div class="bs-docs-example">
             <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
           </div>
 <pre class="prettyprint linenums">
 &lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
 </pre>
 
-          <h5>Small button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
-          </div>
-<pre class="prettyprint linenums">
-&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
-</pre>
-
-
           <h4>Navigation</h4>
           <div class="bs-docs-example">
             <div class="well" style="padding: 8px 0; margin-bottom: 0;">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
@@ -2015,23 +2015,18 @@
 &lt;/div&gt;
 </pre>
 
-          <h5>{{_i}}Large button{{/i}}</h5>
+          <h5>{{_i}}Button sizes{{/i}}</h5>
           <div class="bs-docs-example">
             <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
           </div>{{! /bs-docs-example }}
 <pre class="prettyprint linenums">
 &lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
 </pre>
 
-          <h5>{{_i}}Small button{{/i}}</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
-          </div>{{! /bs-docs-example }}
-<pre class="prettyprint linenums">
-&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
-</pre>
-
-
           <h4>{{_i}}Navigation{{/i}}</h4>
           <div class="bs-docs-example">
             <div class="well" style="padding: 8px 0; margin-bottom: 0;">
diff --git a/less/buttons.less b/less/buttons.less
@@ -86,6 +86,10 @@
 .btn-small [class*=" icon-"] {
   margin-top: 0;
 }
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+  margin-top: -1px;
+}
 
 // Mini
 .btn-mini {
