diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 483251b927..61babf125c 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e1413d440e..2fe20c332a 100644 --- a/docs/assets/css/bootstrap.css +++ b/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 { diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9d07f3c44e..cc64d31664 100644 --- a/docs/assets/css/docs.css +++ b/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; diff --git a/docs/base-css.html b/docs/base-css.html index c71874b3a2..654775fc1c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1303,142 +1303,142 @@ For example, <code>section</code> should be wrapped as inline.
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + +
- - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + +
- - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +
@@ -1457,13 +1457,13 @@ For example, <code>section</code> should be wrapped as inline.

How to use

-

With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:

+

With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

-<i class="i i-search"></i>
+<i class="i-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

-<i class="i i-search i-white"></i>
+<i class="i-search i-white"></i>

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

@@ -1486,40 +1486,40 @@ For example, <code>section</code> should be wrapped as inline.
- - - - + + + +
User

- Refresh - Checkout - Delete + Refresh + Checkout + Delete

- Comment - Settings - More Info + Comment + Settings + More Info

@@ -1530,7 +1530,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
diff --git a/docs/components.html b/docs/components.html index 26fa9b7f57..a26fed2191 100644 --- a/docs/components.html +++ b/docs/components.html @@ -548,13 +548,13 @@ 
@@ -562,7 +562,7 @@
   ...
   <li>
     <a href="#">
-      <i class="i i-book"></i>
+      <i class="i-book"></i>
       Library
     </a>
   </li>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 31607eef91..7b174d604e 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1227,142 +1227,142 @@
   

     

       

-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       

     

     

       

-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       

     

     

       

-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       

     

     

       

-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
 
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
       

     

   

@@ -1381,13 +1381,13 @@

{{_i}}How to use{{/i}}

-

{{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:{{/i}}

+

{{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}

-<i class="i i-search"></i>
+<i class="i-search"></i>

{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

-<i class="i i-search i-white"></i>
+<i class="i-search i-white"></i>

{{_i}}There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}

@@ -1410,40 +1410,40 @@
- - - - + + + +
{{_i}}User{{/i}}

- {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} + {{_i}}Refresh{{/i}} + {{_i}}Checkout{{/i}} + {{_i}}Delete{{/i}}

- {{_i}}Comment{{/i}} - {{_i}}Settings{{/i}} - {{_i}}More Info{{/i}} + {{_i}}Comment{{/i}} + {{_i}}Settings{{/i}} + {{_i}}More Info{{/i}}

@@ -1454,7 +1454,7 @@
- +
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 2386f6a9e9..69ee4c16a3 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -472,13 +472,13 @@ 
@@ -486,7 +486,7 @@
   ...
   <li>
     <a href="#">
-      <i class="i i-book"></i>
+      <i class="i-book"></i>
       {{_i}}Library{{/i}}
     </a>
   </li>
diff --git a/less/sprites.less b/less/sprites.less
index c5c8fd725a..6e1f1ba9c3 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -14,7 +14,7 @@
 // For the white version of the  icons, just add the .i-white class:
 // 
 
-.i {
+[class*="i-"] {
   display: inline-block;
   width: 14px;
   height: 14px;