addressing #1056 & #85

build/assets/font-awesome/less/core.less

@@ -41,19 +41,18 @@ a {
   }
 }
 
-ul.icons-ul {
+.icons-ul {
+  margin-left: @icons-ul-width;
   list-style-type: none;
-  text-indent: -10/14em;
-  margin-left: 30/14em;
 
-  > li {
+  > li { position: relative; }
+
   .icon-li {
-      width: 2/14em;
-      display: inline-block;
+    position: absolute;
+    left: -@icons-ul-width;
+    width: @icons-ul-width - @icons-ul-padding;
     text-align: right;
-      padding-right: 8/14em;
-    }
-    a .icon-li:before { display: inline-block; }
+    line-height: inherit;
   }
 }
 

build/assets/font-awesome/less/variables.less

@@ -10,6 +10,8 @@
 @iconMuted:          #eee;
 @iconLight:          #fff;
 @iconDark:           #333;
+@icons-ul-width:     30/14em;
+@icons-ul-padding:   8/14em;
 
 {% for icon in icons %}
   @{{ icon.id }}: "\{{ icon.unicode }}";

build/icons.yml

@@ -2323,3 +2323,17 @@ icons:
     created:    3.2.0
     categories:
       - Web Application Icons
+
+  - name:       YouTube Sign
+    id:         youtube-sign
+    unicode:    f166
+    created:    3.2.0
+    categories:
+      - Brand Icons
+
+  - name:       YouTube
+    id:         youtube
+    unicode:    f167
+    created:    3.2.0
+    categories:
+      - Brand Icons

build/test.html

@@ -480,7 +480,11 @@ relative_path: ../
         <ul class="icons-ul">
           <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-          <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <i class="icon-building"></i>
+            <span class="label">foo</span>
+            <a class="btn">foo</a>
+          </li>
         </ul>
       </div>
     </div>
@@ -602,6 +606,21 @@ relative_path: ../
     <i class="icon-circle-blank icon-large icon-spin"></i> Loading...
     <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
   </div>
+  <h4>Bootstrap Prepend and Append</h4>
+  <div class="row">
+    <div class="span6">
+      <div class="input-prepend">
+        <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
+        <input class="span2" id="prependedInput" type="text" placeholder="Username">
+      </div>
+    </div>
+    <div class="span6">
+      <div class="input-append">
+        <input class="span2" id="appendedInput" type="text">
+        <span class="add-on"><i class="icon-spinner icon-spin"></i></span>
+      </div>
+    </div>
+  </div>
 
   <h3>Stacked icons</h3>
   <div class="well">