updated icons to require a base class .icon

diff --git a/bootstrap.css b/bootstrap.css
index 616e90bb1183f4288113500e3f0935bcd2e32864..ffdf19f2e403cbf1db01b0b3e0bbdedd06739c83 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Jan 25 08:34:06 PST 2012
+ * Date: Wed Jan 25 09:50:58 PST 2012
  */
 article,
 aside,
@@ -1088,7 +1088,7 @@ table .headerSortUp:after {
   -moz-opacity: 0.6;
   opacity: 0.6;
 }
-i {
+.icon {
   background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
   background-position: 0 0;
   background-repeat: no-repeat;

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 57d76d94523ccbef0a69a9d47d2b1fe90530c37e..9be1c65d475008799951b3dd6997097b58266341 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -208,7 +208,7 @@ table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0
 table .header:hover:after{visibility:visible;}
 table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
 table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
-i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;}
+.icon{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;}
 .glass{background-position:0 0;}
 .music{background-position:-24px 0;}
 .search{background-position:-48px 0;}

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 12c534fb2da46b1629eae6e9b6e1dc5b24fabeb4..0fe480ecb343dce7e4a64526dd7b8c151178dc21 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -596,9 +596,14 @@ form.well {
 
 /* Icons
 ------------------------- */
+.the-icons {
+  margin-bottom: 18px;
+}
 .the-icons i {
   display: block;
   margin-bottom: 5px;
+}
+.the-icons i:hover {
   background-color: rgba(255,0,0,.25);
 }
 .the-icons i:after {
@@ -606,9 +611,8 @@ form.well {
   content: attr(class);
   font-style: normal;
   margin-left: 20px;
-  width: 100px;
+  width: 140px;
 }
-
 #javascript input[type=checkbox] {
   position: relative;
   top: -1px;

diff --git a/docs/base-css.html b/docs/base-css.html
index 75c7efe5e6f40b8cee4e1be01735ea2894050cac..6b6bd5c51a16d22cea10e6176652f2761d0b31dd 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1284,119 +1284,119 @@
     <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
   </div>
   <div class="row">
-    <div class="span2">
-      <div class="the-icons">
-        <i class="glass"></i>
-        <i class="music"></i>
-        <i class="search"></i>
-        <i class="envelope"></i>
-        <i class="heart"></i>
-        <i class="star"></i>
-        <i class="star-empty"></i>
-        <i class="user"></i>
-        <i class="film"></i>
-        <i class="th-large"></i>
-        <i class="th"></i>
-        <i class="th-list"></i>
-        <i class="ok"></i>
-        <i class="remove"></i>
-        <i class="zoom-in"></i>
-        <i class="zoom-out"></i>
-        <i class="off"></i>
-        <i class="signal"></i>
-        <i class="cog"></i>
-        <i class="trash"></i>
-      </div>
-    </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="home"></i>
-        <i class="file"></i>
-        <i class="time"></i>
-        <i class="road"></i>
-        <i class="download-alt"></i>
-        <i class="download"></i>
-        <i class="upload"></i>
-        <i class="inbox"></i>
-        <i class="play-circle"></i>
-        <i class="repeat"></i>
-        <i class="refresh"></i>
-        <i class="calendar"></i>
-        <i class="lock"></i>
-        <i class="flag"></i>
-        <i class="headphones"></i>
-        <i class="volume-off"></i>
-        <i class="volume-down"></i>
-        <i class="volume-up"></i>
-        <i class="qrcode"></i>
-        <i class="barcode"></i>
+        <i class="icon glass"></i>
+        <i class="icon music"></i>
+        <i class="icon search"></i>
+        <i class="icon envelope"></i>
+        <i class="icon heart"></i>
+        <i class="icon star"></i>
+        <i class="icon star-empty"></i>
+        <i class="icon user"></i>
+        <i class="icon film"></i>
+        <i class="icon th-large"></i>
+        <i class="icon th"></i>
+        <i class="icon th-list"></i>
+        <i class="icon ok"></i>
+        <i class="icon remove"></i>
+        <i class="icon zoom-in"></i>
+        <i class="icon zoom-out"></i>
+        <i class="icon off"></i>
+        <i class="icon signal"></i>
+        <i class="icon cog"></i>
+        <i class="icon trash"></i>
+
+        <i class="icon home"></i>
+        <i class="icon file"></i>
+        <i class="icon time"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="tag"></i>
-        <i class="tags"></i>
-        <i class="book"></i>
-        <i class="bookmark"></i>
-        <i class="print"></i>
-        <i class="camera"></i>
-        <i class="font"></i>
-        <i class="bold"></i>
-        <i class="italic"></i>
-        <i class="text-height"></i>
-        <i class="text-width"></i>
-        <i class="align-left"></i>
-        <i class="align-center"></i>
-        <i class="align-right"></i>
-        <i class="align-justify"></i>
-        <i class="list"></i>
-        <i class="indent-left"></i>
-        <i class="indent-right"></i>
-        <i class="facetime-video"></i>
-        <i class="picture"></i>
+        <i class="icon road"></i>
+        <i class="icon download-alt"></i>
+        <i class="icon download"></i>
+        <i class="icon upload"></i>
+        <i class="icon inbox"></i>
+        <i class="icon play-circle"></i>
+        <i class="icon repeat"></i>
+        <i class="icon refresh"></i>
+        <i class="icon calendar"></i>
+        <i class="icon lock"></i>
+        <i class="icon flag"></i>
+        <i class="icon headphones"></i>
+        <i class="icon volume-off"></i>
+        <i class="icon volume-down"></i>
+        <i class="icon volume-up"></i>
+        <i class="icon qrcode"></i>
+        <i class="icon barcode"></i>
+
+        <i class="icon tag"></i>
+        <i class="icon tags"></i>
+        <i class="icon book"></i>
+        <i class="icon bookmark"></i>
+        <i class="icon print"></i>
+        <i class="icon camera"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="pencil"></i>
-        <i class="map-marker"></i>
-        <i class="adjust"></i>
-        <i class="tint"></i>
-        <i class="edit"></i>
-        <i class="share"></i>
-        <i class="check"></i>
-        <i class="move"></i>
-        <i class="step-backward"></i>
-        <i class="fast-backward"></i>
-        <i class="backward"></i>
-        <i class="play"></i>
-        <i class="pause"></i>
-        <i class="stop"></i>
-        <i class="forward"></i>
-        <i class="fast-forward"></i>
-        <i class="step-forward"></i>
-        <i class="eject"></i>
-        <i class="chevron-left"></i>
-        <i class="chevron-right"></i>
+        <i class="icon font"></i>
+        <i class="icon bold"></i>
+        <i class="icon italic"></i>
+        <i class="icon text-height"></i>
+        <i class="icon text-width"></i>
+        <i class="icon align-left"></i>
+        <i class="icon align-center"></i>
+        <i class="icon align-right"></i>
+        <i class="icon align-justify"></i>
+        <i class="icon list"></i>
+        <i class="icon indent-left"></i>
+        <i class="icon indent-right"></i>
+        <i class="icon facetime-video"></i>
+        <i class="icon picture"></i>
+
+        <i class="icon pencil"></i>
+        <i class="icon map-marker"></i>
+        <i class="icon adjust"></i>
+        <i class="icon tint"></i>
+        <i class="icon edit"></i>
+        <i class="icon share"></i>
+        <i class="icon check"></i>
+        <i class="icon move"></i>
+        <i class="icon step-backward"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="arrow-left"></i>
-        <i class="arrow-right"></i>
-        <i class="arrow-up"></i>
-        <i class="arrow-down"></i>
-        <i class="share-alt"></i>
-        <i class="resize-full"></i>
-        <i class="resize-small"></i>
-        <i class="plus"></i>
-        <i class="minus"></i>
-        <i class="asterisk"></i>
+        <i class="icon fast-backward"></i>
+        <i class="icon backward"></i>
+        <i class="icon play"></i>
+        <i class="icon pause"></i>
+        <i class="icon stop"></i>
+        <i class="icon forward"></i>
+        <i class="icon fast-forward"></i>
+        <i class="icon step-forward"></i>
+        <i class="icon eject"></i>
+        <i class="icon chevron-left"></i>
+        <i class="icon chevron-right"></i>
+
+        <i class="icon arrow-left"></i>
+        <i class="icon arrow-right"></i>
+        <i class="icon arrow-up"></i>
+        <i class="icon arrow-down"></i>
+        <i class="icon share-alt"></i>
+        <i class="icon resize-full"></i>
+        <i class="icon resize-small"></i>
+        <i class="icon plus"></i>
+        <i class="icon minus"></i>
+        <i class="icon asterisk"></i>
       </div>
     </div>
-    <div class="span2">
-      <p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p>
-    </div>
+  </div>
+  <div class="alert alert-info">
+    <strong>Heads up!</strong> On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons.
   </div>
 
   <br>
@@ -1409,11 +1409,11 @@
     </div>
     <div class="span4">
       <h3>How to use</h3>
-      <p>With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
+      <p>With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons with a base class of <code>.icon</code>. To use, place the following code just about anywhere:</p>
 <pre class="prettyprint linenums">
-&lt;i class="chevron-left"&gt;&lt;/i&gt;
+&lt;i class="icon search"&gt;&lt;/i&gt;
 </pre>
-      <p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p>
+      <p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
     </div>
     <div class="span4">
       <h3>Use cases</h3>

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6308522595a3a82d6cdd1c70638f5875e2a567f0..32df36b0f0f06b73ca98ce917aa38009ccd74bb4 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1221,119 +1221,119 @@
     <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
   </div>
   <div class="row">
-    <div class="span2">
-      <div class="the-icons">
-        <i class="glass"></i>
-        <i class="music"></i>
-        <i class="search"></i>
-        <i class="envelope"></i>
-        <i class="heart"></i>
-        <i class="star"></i>
-        <i class="star-empty"></i>
-        <i class="user"></i>
-        <i class="film"></i>
-        <i class="th-large"></i>
-        <i class="th"></i>
-        <i class="th-list"></i>
-        <i class="ok"></i>
-        <i class="remove"></i>
-        <i class="zoom-in"></i>
-        <i class="zoom-out"></i>
-        <i class="off"></i>
-        <i class="signal"></i>
-        <i class="cog"></i>
-        <i class="trash"></i>
-      </div>
-    </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="home"></i>
-        <i class="file"></i>
-        <i class="time"></i>
-        <i class="road"></i>
-        <i class="download-alt"></i>
-        <i class="download"></i>
-        <i class="upload"></i>
-        <i class="inbox"></i>
-        <i class="play-circle"></i>
-        <i class="repeat"></i>
-        <i class="refresh"></i>
-        <i class="calendar"></i>
-        <i class="lock"></i>
-        <i class="flag"></i>
-        <i class="headphones"></i>
-        <i class="volume-off"></i>
-        <i class="volume-down"></i>
-        <i class="volume-up"></i>
-        <i class="qrcode"></i>
-        <i class="barcode"></i>
+        <i class="icon glass"></i>
+        <i class="icon music"></i>
+        <i class="icon search"></i>
+        <i class="icon envelope"></i>
+        <i class="icon heart"></i>
+        <i class="icon star"></i>
+        <i class="icon star-empty"></i>
+        <i class="icon user"></i>
+        <i class="icon film"></i>
+        <i class="icon th-large"></i>
+        <i class="icon th"></i>
+        <i class="icon th-list"></i>
+        <i class="icon ok"></i>
+        <i class="icon remove"></i>
+        <i class="icon zoom-in"></i>
+        <i class="icon zoom-out"></i>
+        <i class="icon off"></i>
+        <i class="icon signal"></i>
+        <i class="icon cog"></i>
+        <i class="icon trash"></i>
+
+        <i class="icon home"></i>
+        <i class="icon file"></i>
+        <i class="icon time"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="tag"></i>
-        <i class="tags"></i>
-        <i class="book"></i>
-        <i class="bookmark"></i>
-        <i class="print"></i>
-        <i class="camera"></i>
-        <i class="font"></i>
-        <i class="bold"></i>
-        <i class="italic"></i>
-        <i class="text-height"></i>
-        <i class="text-width"></i>
-        <i class="align-left"></i>
-        <i class="align-center"></i>
-        <i class="align-right"></i>
-        <i class="align-justify"></i>
-        <i class="list"></i>
-        <i class="indent-left"></i>
-        <i class="indent-right"></i>
-        <i class="facetime-video"></i>
-        <i class="picture"></i>
+        <i class="icon road"></i>
+        <i class="icon download-alt"></i>
+        <i class="icon download"></i>
+        <i class="icon upload"></i>
+        <i class="icon inbox"></i>
+        <i class="icon play-circle"></i>
+        <i class="icon repeat"></i>
+        <i class="icon refresh"></i>
+        <i class="icon calendar"></i>
+        <i class="icon lock"></i>
+        <i class="icon flag"></i>
+        <i class="icon headphones"></i>
+        <i class="icon volume-off"></i>
+        <i class="icon volume-down"></i>
+        <i class="icon volume-up"></i>
+        <i class="icon qrcode"></i>
+        <i class="icon barcode"></i>
+
+        <i class="icon tag"></i>
+        <i class="icon tags"></i>
+        <i class="icon book"></i>
+        <i class="icon bookmark"></i>
+        <i class="icon print"></i>
+        <i class="icon camera"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="pencil"></i>
-        <i class="map-marker"></i>
-        <i class="adjust"></i>
-        <i class="tint"></i>
-        <i class="edit"></i>
-        <i class="share"></i>
-        <i class="check"></i>
-        <i class="move"></i>
-        <i class="step-backward"></i>
-        <i class="fast-backward"></i>
-        <i class="backward"></i>
-        <i class="play"></i>
-        <i class="pause"></i>
-        <i class="stop"></i>
-        <i class="forward"></i>
-        <i class="fast-forward"></i>
-        <i class="step-forward"></i>
-        <i class="eject"></i>
-        <i class="chevron-left"></i>
-        <i class="chevron-right"></i>
+        <i class="icon font"></i>
+        <i class="icon bold"></i>
+        <i class="icon italic"></i>
+        <i class="icon text-height"></i>
+        <i class="icon text-width"></i>
+        <i class="icon align-left"></i>
+        <i class="icon align-center"></i>
+        <i class="icon align-right"></i>
+        <i class="icon align-justify"></i>
+        <i class="icon list"></i>
+        <i class="icon indent-left"></i>
+        <i class="icon indent-right"></i>
+        <i class="icon facetime-video"></i>
+        <i class="icon picture"></i>
+
+        <i class="icon pencil"></i>
+        <i class="icon map-marker"></i>
+        <i class="icon adjust"></i>
+        <i class="icon tint"></i>
+        <i class="icon edit"></i>
+        <i class="icon share"></i>
+        <i class="icon check"></i>
+        <i class="icon move"></i>
+        <i class="icon step-backward"></i>
       </div>
     </div>
-    <div class="span2">
+    <div class="span3">
       <div class="the-icons">
-        <i class="arrow-left"></i>
-        <i class="arrow-right"></i>
-        <i class="arrow-up"></i>
-        <i class="arrow-down"></i>
-        <i class="share-alt"></i>
-        <i class="resize-full"></i>
-        <i class="resize-small"></i>
-        <i class="plus"></i>
-        <i class="minus"></i>
-        <i class="asterisk"></i>
+        <i class="icon fast-backward"></i>
+        <i class="icon backward"></i>
+        <i class="icon play"></i>
+        <i class="icon pause"></i>
+        <i class="icon stop"></i>
+        <i class="icon forward"></i>
+        <i class="icon fast-forward"></i>
+        <i class="icon step-forward"></i>
+        <i class="icon eject"></i>
+        <i class="icon chevron-left"></i>
+        <i class="icon chevron-right"></i>
+
+        <i class="icon arrow-left"></i>
+        <i class="icon arrow-right"></i>
+        <i class="icon arrow-up"></i>
+        <i class="icon arrow-down"></i>
+        <i class="icon share-alt"></i>
+        <i class="icon resize-full"></i>
+        <i class="icon resize-small"></i>
+        <i class="icon plus"></i>
+        <i class="icon minus"></i>
+        <i class="icon asterisk"></i>
       </div>
     </div>
-    <div class="span2">
-      <p class="muted">{{_i}}Light red background color is only used to show the dimensions of the icons in the docs.{{/i}}</p>
-    </div>
+  </div>
+  <div class="alert alert-info">
+    {{_i}}<strong>Heads up!</strong> On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons.{{/i}}
   </div>
 
   <br>
@@ -1346,11 +1346,11 @@
     </div>
     <div class="span4">
       <h3>{{_i}}How to use{{/i}}</h3>
-      <p>{{_i}}With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:{{/i}}</p>
+      <p>{{_i}}With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons with a base class of <code>.icon</code>. To use, place the following code just about anywhere:{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;i class="chevron-left"&gt;&lt;/i&gt;
+&lt;i class="icon search"&gt;&lt;/i&gt;
 </pre>
-      <p>{{_i}}There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}</p>
+      <p>{{_i}}There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Use cases{{/i}}</h3>

diff --git a/lib/sprites.less b/lib/sprites.less
index 4a49bb8b44437df5a83003453714bcfa45d699f0..0d51125c264ed84cf58fef79b8b9e9adb4031cd4 100644 (file)
--- a/lib/sprites.less
+++ b/lib/sprites.less
@@ -11,7 +11,7 @@
 // class to add width, height, and background-position. Your resulting HTML
 // will look like <i class="inbox"></i>.
 
-i {
+.icon {
   background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
   background-position: 0 0;
   background-repeat: no-repeat;