once more, overhaul the icons and use the css regex selector on our icons

docs/assets/css/bootstrap.css

@@ -1112,7 +1112,7 @@ table .span12 {
   width: 924px;
   margin-left: 0;
 }
-.i {
+[class*="i-"] {
   display: inline-block;
   width: 14px;
   height: 14px;
@@ -1122,7 +1122,7 @@ table .span12 {
   background-repeat: no-repeat;
   *margin-right: .3em;
 }
-.i:last-child {
+[class*="i-"]:last-child {
   *margin-left: 0;
 }
 .i-white {

docs/assets/css/docs.css

@@ -564,14 +564,14 @@ form.well {
 .the-icons {
   margin-bottom: 18px;
 }
-.the-icons .i {
+.the-icons i {
   display: block;
   margin-bottom: 5px;
 }
-.the-icons .i:hover {
+.the-icons i:hover {
   background-color: rgba(255,0,0,.25);
 }
-.the-icons .i:after {
+.the-icons i:after {
   display: block;
   content: attr(class);
   font-style: normal;

docs/components.html

@@ -548,13 +548,13 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav nav-list">
           <li class="nav-header">List header</li>
-          <li class="active"><a href="#"><i class="i i-white i-home"></i> Home</a></li>
-          <li><a href="#"><i class="i i-book"></i> Library</a></li>
-          <li><a href="#"><i class="i i-pencil"></i> Applications</a></li>
+          <li class="active"><a href="#"><i class="i-white i-home"></i> Home</a></li>
+          <li><a href="#"><i class="i-book"></i> Library</a></li>
+          <li><a href="#"><i class="i-pencil"></i> Applications</a></li>
           <li class="nav-header">Another list header</li>
-          <li><a href="#"><i class="i i-user"></i> Profile</a></li>
-          <li><a href="#"><i class="i i-cog"></i> Settings</a></li>
-          <li><a href="#"><i class="i i-flag"></i> Help</a></li>
+          <li><a href="#"><i class="i-user"></i> Profile</a></li>
+          <li><a href="#"><i class="i-cog"></i> Settings</a></li>
+          <li><a href="#"><i class="i-flag"></i> Help</a></li>
         </ul>
       </div> <!-- /well -->
 <pre class="prettyprint linenums">
@@ -562,7 +562,7 @@
   ...
   &lt;li&gt;
     &lt;a href="#"&gt;
-      &lt;i class="i i-book"&gt;&lt;/i&gt;
+      &lt;i class="i-book"&gt;&lt;/i&gt;
       Library
     &lt;/a&gt;
   &lt;/li&gt;

docs/templates/pages/components.mustache

@@ -472,13 +472,13 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav nav-list">
           <li class="nav-header">{{_i}}List header{{/i}}</li>
-          <li class="active"><a href="#"><i class="i i-white i-home"></i> {{_i}}Home{{/i}}</a></li>
-          <li><a href="#"><i class="i i-book"></i> {{_i}}Library{{/i}}</a></li>
-          <li><a href="#"><i class="i i-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+          <li class="active"><a href="#"><i class="i-white i-home"></i> {{_i}}Home{{/i}}</a></li>
+          <li><a href="#"><i class="i-book"></i> {{_i}}Library{{/i}}</a></li>
+          <li><a href="#"><i class="i-pencil"></i> {{_i}}Applications{{/i}}</a></li>
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
-          <li><a href="#"><i class="i i-user"></i> {{_i}}Profile{{/i}}</a></li>
-          <li><a href="#"><i class="i i-cog"></i> {{_i}}Settings{{/i}}</a></li>
-          <li><a href="#"><i class="i i-flag"></i> {{_i}}Help{{/i}}</a></li>
+          <li><a href="#"><i class="i-user"></i> {{_i}}Profile{{/i}}</a></li>
+          <li><a href="#"><i class="i-cog"></i> {{_i}}Settings{{/i}}</a></li>
+          <li><a href="#"><i class="i-flag"></i> {{_i}}Help{{/i}}</a></li>
         </ul>
       </div> <!-- /well -->
 <pre class="prettyprint linenums">
@@ -486,7 +486,7 @@
   ...
   &lt;li&gt;
     &lt;a href="#"&gt;
-      &lt;i class="i i-book"&gt;&lt;/i&gt;
+      &lt;i class="i-book"&gt;&lt;/i&gt;
       {{_i}}Library{{/i}}
     &lt;/a&gt;
   &lt;/li&gt;

less/sprites.less

@@ -14,7 +14,7 @@
 // For the white version of the  icons, just add the .i-white class:
 // <i class="i i-inbox i-white"></i>
 
-.i {
+[class*="i-"] {
   display: inline-block;
   width: 14px;
   height: 14px;