Skip to content

B
bootstrap
Commit b01de5fc authored by Mark Otto's avatar Mark Otto
Browse files
Options

updated icons to require a base class .icon

parent d8041f7c
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 214 deletions
bootstrap.css
View file @ b01de5fc
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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, article,
aside, aside,
...@@ -1088,7 +1088,7 @@ table .headerSortUp:after { ...@@ -1088,7 +1088,7 @@ table .headerSortUp:after {
-moz-opacity: 0.6; -moz-opacity: 0.6;
opacity: 0.6; opacity: 0.6;
} }
i { .icon {
background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
......
bootstrap.min.css
View file @ b01de5fc
...@@ -208,7 +208,7 @@ table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0 ...@@ -208,7 +208,7 @@ table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0
table .header:hover:after{visibility:visible;} 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 .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;} 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;} .glass{background-position:0 0;}
.music{background-position:-24px 0;} .music{background-position:-24px 0;}
.search{background-position:-48px 0;} .search{background-position:-48px 0;}
......
docs/assets/css/docs.css
View file @ b01de5fc
...@@ -596,9 +596,14 @@ form.well { ...@@ -596,9 +596,14 @@ form.well {
/* Icons /* Icons
------------------------- */ ------------------------- */
.the-icons {
margin-bottom: 18px;
}
.the-icons i { .the-icons i {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25); background-color: rgba(255,0,0,.25);
} }
.the-icons i:after { .the-icons i:after {
...@@ -606,9 +611,8 @@ form.well { ...@@ -606,9 +611,8 @@ form.well {
content: attr(class); content: attr(class);
font-style: normal; font-style: normal;
margin-left: 20px; margin-left: 20px;
width: 100px; width: 140px;
} }
#javascript input[type=checkbox] { #javascript input[type=checkbox] {
position: relative; position: relative;
top: -1px; top: -1px;
......
docs/base-css.html
View file @ b01de5fc
...@@ -1284,119 +1284,119 @@ ...@@ -1284,119 +1284,119 @@
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span2"> <div class="span3">
<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="the-icons"> <div class="the-icons">
<i class="home"></i> <i class="icon glass"></i>
<i class="file"></i> <i class="icon music"></i>
<i class="time"></i> <i class="icon search"></i>
<i class="road"></i> <i class="icon envelope"></i>
<i class="download-alt"></i> <i class="icon heart"></i>
<i class="download"></i> <i class="icon star"></i>
<i class="upload"></i> <i class="icon star-empty"></i>
<i class="inbox"></i> <i class="icon user"></i>
<i class="play-circle"></i> <i class="icon film"></i>
<i class="repeat"></i> <i class="icon th-large"></i>
<i class="refresh"></i> <i class="icon th"></i>
<i class="calendar"></i> <i class="icon th-list"></i>
<i class="lock"></i> <i class="icon ok"></i>
<i class="flag"></i> <i class="icon remove"></i>
<i class="headphones"></i> <i class="icon zoom-in"></i>
<i class="volume-off"></i> <i class="icon zoom-out"></i>
<i class="volume-down"></i> <i class="icon off"></i>
<i class="volume-up"></i> <i class="icon signal"></i>
<i class="qrcode"></i> <i class="icon cog"></i>
<i class="barcode"></i> <i class="icon trash"></i>
<i class="icon home"></i>
<i class="icon file"></i>
<i class="icon time"></i>
</div> </div>
</div> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="tag"></i> <i class="icon road"></i>
<i class="tags"></i> <i class="icon download-alt"></i>
<i class="book"></i> <i class="icon download"></i>
<i class="bookmark"></i> <i class="icon upload"></i>
<i class="print"></i> <i class="icon inbox"></i>
<i class="camera"></i> <i class="icon play-circle"></i>
<i class="font"></i> <i class="icon repeat"></i>
<i class="bold"></i> <i class="icon refresh"></i>
<i class="italic"></i> <i class="icon calendar"></i>
<i class="text-height"></i> <i class="icon lock"></i>
<i class="text-width"></i> <i class="icon flag"></i>
<i class="align-left"></i> <i class="icon headphones"></i>
<i class="align-center"></i> <i class="icon volume-off"></i>
<i class="align-right"></i> <i class="icon volume-down"></i>
<i class="align-justify"></i> <i class="icon volume-up"></i>
<i class="list"></i> <i class="icon qrcode"></i>
<i class="indent-left"></i> <i class="icon barcode"></i>
<i class="indent-right"></i>
<i class="facetime-video"></i> <i class="icon tag"></i>
<i class="picture"></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> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="pencil"></i> <i class="icon font"></i>
<i class="map-marker"></i> <i class="icon bold"></i>
<i class="adjust"></i> <i class="icon italic"></i>
<i class="tint"></i> <i class="icon text-height"></i>
<i class="edit"></i> <i class="icon text-width"></i>
<i class="share"></i> <i class="icon align-left"></i>
<i class="check"></i> <i class="icon align-center"></i>
<i class="move"></i> <i class="icon align-right"></i>
<i class="step-backward"></i> <i class="icon align-justify"></i>
<i class="fast-backward"></i> <i class="icon list"></i>
<i class="backward"></i> <i class="icon indent-left"></i>
<i class="play"></i> <i class="icon indent-right"></i>
<i class="pause"></i> <i class="icon facetime-video"></i>
<i class="stop"></i> <i class="icon picture"></i>
<i class="forward"></i>
<i class="fast-forward"></i> <i class="icon pencil"></i>
<i class="step-forward"></i> <i class="icon map-marker"></i>
<i class="eject"></i> <i class="icon adjust"></i>
<i class="chevron-left"></i> <i class="icon tint"></i>
<i class="chevron-right"></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> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="arrow-left"></i> <i class="icon fast-backward"></i>
<i class="arrow-right"></i> <i class="icon backward"></i>
<i class="arrow-up"></i> <i class="icon play"></i>
<i class="arrow-down"></i> <i class="icon pause"></i>
<i class="share-alt"></i> <i class="icon stop"></i>
<i class="resize-full"></i> <i class="icon forward"></i>
<i class="resize-small"></i> <i class="icon fast-forward"></i>
<i class="plus"></i> <i class="icon step-forward"></i>
<i class="minus"></i> <i class="icon eject"></i>
<i class="asterisk"></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> </div>
<div class="span2"> </div>
<p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p> <div class="alert alert-info">
</div> <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> </div>
<br> <br>
...@@ -1409,11 +1409,11 @@ ...@@ -1409,11 +1409,11 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>How to use</h3> <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"> <pre class="prettyprint linenums">
&lt;i class="chevron-left"&gt;&lt;/i&gt; &lt;i class="icon search"&gt;&lt;/i&gt;
</pre> </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>
<div class="span4"> <div class="span4">
<h3>Use cases</h3> <h3>Use cases</h3>
......
docs/templates/pages/base-css.mustache
View file @ b01de5fc
...@@ -1221,119 +1221,119 @@ ...@@ -1221,119 +1221,119 @@
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1> <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span2"> <div class="span3">
<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="the-icons"> <div class="the-icons">
<i class="home"></i> <i class="icon glass"></i>
<i class="file"></i> <i class="icon music"></i>
<i class="time"></i> <i class="icon search"></i>
<i class="road"></i> <i class="icon envelope"></i>
<i class="download-alt"></i> <i class="icon heart"></i>
<i class="download"></i> <i class="icon star"></i>
<i class="upload"></i> <i class="icon star-empty"></i>
<i class="inbox"></i> <i class="icon user"></i>
<i class="play-circle"></i> <i class="icon film"></i>
<i class="repeat"></i> <i class="icon th-large"></i>
<i class="refresh"></i> <i class="icon th"></i>
<i class="calendar"></i> <i class="icon th-list"></i>
<i class="lock"></i> <i class="icon ok"></i>
<i class="flag"></i> <i class="icon remove"></i>
<i class="headphones"></i> <i class="icon zoom-in"></i>
<i class="volume-off"></i> <i class="icon zoom-out"></i>
<i class="volume-down"></i> <i class="icon off"></i>
<i class="volume-up"></i> <i class="icon signal"></i>
<i class="qrcode"></i> <i class="icon cog"></i>
<i class="barcode"></i> <i class="icon trash"></i>
<i class="icon home"></i>
<i class="icon file"></i>
<i class="icon time"></i>
</div> </div>
</div> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="tag"></i> <i class="icon road"></i>
<i class="tags"></i> <i class="icon download-alt"></i>
<i class="book"></i> <i class="icon download"></i>
<i class="bookmark"></i> <i class="icon upload"></i>
<i class="print"></i> <i class="icon inbox"></i>
<i class="camera"></i> <i class="icon play-circle"></i>
<i class="font"></i> <i class="icon repeat"></i>
<i class="bold"></i> <i class="icon refresh"></i>
<i class="italic"></i> <i class="icon calendar"></i>
<i class="text-height"></i> <i class="icon lock"></i>
<i class="text-width"></i> <i class="icon flag"></i>
<i class="align-left"></i> <i class="icon headphones"></i>
<i class="align-center"></i> <i class="icon volume-off"></i>
<i class="align-right"></i> <i class="icon volume-down"></i>
<i class="align-justify"></i> <i class="icon volume-up"></i>
<i class="list"></i> <i class="icon qrcode"></i>
<i class="indent-left"></i> <i class="icon barcode"></i>
<i class="indent-right"></i>
<i class="facetime-video"></i> <i class="icon tag"></i>
<i class="picture"></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> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="pencil"></i> <i class="icon font"></i>
<i class="map-marker"></i> <i class="icon bold"></i>
<i class="adjust"></i> <i class="icon italic"></i>
<i class="tint"></i> <i class="icon text-height"></i>
<i class="edit"></i> <i class="icon text-width"></i>
<i class="share"></i> <i class="icon align-left"></i>
<i class="check"></i> <i class="icon align-center"></i>
<i class="move"></i> <i class="icon align-right"></i>
<i class="step-backward"></i> <i class="icon align-justify"></i>
<i class="fast-backward"></i> <i class="icon list"></i>
<i class="backward"></i> <i class="icon indent-left"></i>
<i class="play"></i> <i class="icon indent-right"></i>
<i class="pause"></i> <i class="icon facetime-video"></i>
<i class="stop"></i> <i class="icon picture"></i>
<i class="forward"></i>
<i class="fast-forward"></i> <i class="icon pencil"></i>
<i class="step-forward"></i> <i class="icon map-marker"></i>
<i class="eject"></i> <i class="icon adjust"></i>
<i class="chevron-left"></i> <i class="icon tint"></i>
<i class="chevron-right"></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> </div>
<div class="span2"> <div class="span3">
<div class="the-icons"> <div class="the-icons">
<i class="arrow-left"></i> <i class="icon fast-backward"></i>
<i class="arrow-right"></i> <i class="icon backward"></i>
<i class="arrow-up"></i> <i class="icon play"></i>
<i class="arrow-down"></i> <i class="icon pause"></i>
<i class="share-alt"></i> <i class="icon stop"></i>
<i class="resize-full"></i> <i class="icon forward"></i>
<i class="resize-small"></i> <i class="icon fast-forward"></i>
<i class="plus"></i> <i class="icon step-forward"></i>
<i class="minus"></i> <i class="icon eject"></i>
<i class="asterisk"></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> </div>
<div class="span2"> </div>
<p class="muted">{{_i}}Light red background color is only used to show the dimensions of the icons in the docs.{{/i}}</p> <div class="alert alert-info">
</div> {{_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> </div>
<br> <br>
...@@ -1346,11 +1346,11 @@ ...@@ -1346,11 +1346,11 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}How to use{{/i}}</h3> <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"> <pre class="prettyprint linenums">
&lt;i class="chevron-left"&gt;&lt;/i&gt; &lt;i class="icon search"&gt;&lt;/i&gt;
</pre> </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>
<div class="span4"> <div class="span4">
<h3>{{_i}}Use cases{{/i}}</h3> <h3>{{_i}}Use cases{{/i}}</h3>
......
lib/sprites.less
View file @ b01de5fc
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
// class to add width, height, and background-position. Your resulting HTML // class to add width, height, and background-position. Your resulting HTML
// will look like <i class="inbox"></i>. // will look like <i class="inbox"></i>.
i { .icon {
background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment