Skip to content
GitLab
Commit d533310b authored by Mark Otto's avatar Mark Otto
Browse files

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

parent de994efa
1 merge request!14752.0 wip
Hide whitespace changes
Inline Side-by-side
Showing
with 304 additions and 304 deletions
+304 -304
docs/assets/bootstrap.zip
+ 0
- 0
View file @ d533310b
No preview for this file type
docs/assets/css/bootstrap.css
+ 2
- 2
View file @ d533310b
......@@ -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
+ 3
- 3
View file @ d533310b
......@@ -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/base-css.html
+ 144
- 144
View file @ d533310b
......@@ -1303,142 +1303,142 @@ For example, <code>section</code> should be wrapped as inline.
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="i i-glass"></i>
<i class="i i-music"></i>
<i class="i i-search"></i>
<i class="i i-envelope"></i>
<i class="i i-heart"></i>
<i class="i i-star"></i>
<i class="i i-star-empty"></i>
<i class="i i-user"></i>
<i class="i i-film"></i>
<i class="i i-th-large"></i>
<i class="i i-th"></i>
<i class="i i-th-list"></i>
<i class="i i-ok"></i>
<i class="i i-remove"></i>
<i class="i i-zoom-in"></i>
<i class="i i-zoom-out"></i>
<i class="i i-off"></i>
<i class="i i-signal"></i>
<i class="i i-cog"></i>
<i class="i i-trash"></i>
<i class="i i-home"></i>
<i class="i i-file"></i>
<i class="i i-time"></i>
<i class="i i-road"></i>
<i class="i i-download-alt"></i>
<i class="i i-download"></i>
<i class="i i-upload"></i>
<i class="i i-inbox"></i>
<i class="i i-play-circle"></i>
<i class="i i-repeat"></i>
<i class="i-glass"></i>
<i class="i-music"></i>
<i class="i-search"></i>
<i class="i-envelope"></i>
<i class="i-heart"></i>
<i class="i-star"></i>
<i class="i-star-empty"></i>
<i class="i-user"></i>
<i class="i-film"></i>
<i class="i-th-large"></i>
<i class="i-th"></i>
<i class="i-th-list"></i>
<i class="i-ok"></i>
<i class="i-remove"></i>
<i class="i-zoom-in"></i>
<i class="i-zoom-out"></i>
<i class="i-off"></i>
<i class="i-signal"></i>
<i class="i-cog"></i>
<i class="i-trash"></i>
<i class="i-home"></i>
<i class="i-file"></i>
<i class="i-time"></i>
<i class="i-road"></i>
<i class="i-download-alt"></i>
<i class="i-download"></i>
<i class="i-upload"></i>
<i class="i-inbox"></i>
<i class="i-play-circle"></i>
<i class="i-repeat"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-refresh"></i>
<i class="i i-list-alt"></i>
<i class="i i-lock"></i>
<i class="i i-flag"></i>
<i class="i i-headphones"></i>
<i class="i i-volume-off"></i>
<i class="i i-volume-down"></i>
<i class="i i-volume-up"></i>
<i class="i i-qrcode"></i>
<i class="i i-barcode"></i>
<i class="i i-tag"></i>
<i class="i i-tags"></i>
<i class="i i-book"></i>
<i class="i i-bookmark"></i>
<i class="i i-print"></i>
<i class="i i-camera"></i>
<i class="i i-font"></i>
<i class="i i-bold"></i>
<i class="i i-italic"></i>
<i class="i i-text-height"></i>
<i class="i i-text-width"></i>
<i class="i i-align-left"></i>
<i class="i i-align-center"></i>
<i class="i i-align-right"></i>
<i class="i i-align-justify"></i>
<i class="i i-list"></i>
<i class="i i-indent-left"></i>
<i class="i i-indent-right"></i>
<i class="i i-facetime-video"></i>
<i class="i i-picture"></i>
<i class="i-refresh"></i>
<i class="i-list-alt"></i>
<i class="i-lock"></i>
<i class="i-flag"></i>
<i class="i-headphones"></i>
<i class="i-volume-off"></i>
<i class="i-volume-down"></i>
<i class="i-volume-up"></i>
<i class="i-qrcode"></i>
<i class="i-barcode"></i>
<i class="i-tag"></i>
<i class="i-tags"></i>
<i class="i-book"></i>
<i class="i-bookmark"></i>
<i class="i-print"></i>
<i class="i-camera"></i>
<i class="i-font"></i>
<i class="i-bold"></i>
<i class="i-italic"></i>
<i class="i-text-height"></i>
<i class="i-text-width"></i>
<i class="i-align-left"></i>
<i class="i-align-center"></i>
<i class="i-align-right"></i>
<i class="i-align-justify"></i>
<i class="i-list"></i>
<i class="i-indent-left"></i>
<i class="i-indent-right"></i>
<i class="i-facetime-video"></i>
<i class="i-picture"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-pencil"></i>
<i class="i i-map-marker"></i>
<i class="i i-adjust"></i>
<i class="i i-tint"></i>
<i class="i i-edit"></i>
<i class="i i-share"></i>
<i class="i i-check"></i>
<i class="i i-move"></i>
<i class="i i-step-backward"></i>
<i class="i i-fast-backward"></i>
<i class="i i-backward"></i>
<i class="i i-play"></i>
<i class="i i-pause"></i>
<i class="i i-stop"></i>
<i class="i i-forward"></i>
<i class="i i-fast-forward"></i>
<i class="i i-step-forward"></i>
<i class="i i-eject"></i>
<i class="i i-chevron-left"></i>
<i class="i i-chevron-right"></i>
<i class="i i-plus-sign"></i>
<i class="i i-minus-sign"></i>
<i class="i i-remove-sign"></i>
<i class="i i-ok-sign"></i>
<i class="i i-question-sign"></i>
<i class="i i-info-sign"></i>
<i class="i i-screenshot"></i>
<i class="i i-remove-circle"></i>
<i class="i i-ok-circle"></i>
<i class="i i-ban-circle"></i>
<i class="i-pencil"></i>
<i class="i-map-marker"></i>
<i class="i-adjust"></i>
<i class="i-tint"></i>
<i class="i-edit"></i>
<i class="i-share"></i>
<i class="i-check"></i>
<i class="i-move"></i>
<i class="i-step-backward"></i>
<i class="i-fast-backward"></i>
<i class="i-backward"></i>
<i class="i-play"></i>
<i class="i-pause"></i>
<i class="i-stop"></i>
<i class="i-forward"></i>
<i class="i-fast-forward"></i>
<i class="i-step-forward"></i>
<i class="i-eject"></i>
<i class="i-chevron-left"></i>
<i class="i-chevron-right"></i>
<i class="i-plus-sign"></i>
<i class="i-minus-sign"></i>
<i class="i-remove-sign"></i>
<i class="i-ok-sign"></i>
<i class="i-question-sign"></i>
<i class="i-info-sign"></i>
<i class="i-screenshot"></i>
<i class="i-remove-circle"></i>
<i class="i-ok-circle"></i>
<i class="i-ban-circle"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-arrow-left"></i>
<i class="i i-arrow-right"></i>
<i class="i i-arrow-up"></i>
<i class="i i-arrow-down"></i>
<i class="i i-share-alt"></i>
<i class="i i-resize-full"></i>
<i class="i i-resize-small"></i>
<i class="i i-plus"></i>
<i class="i i-minus"></i>
<i class="i i-asterisk"></i>
<i class="i i-exclamation-sign"></i>
<i class="i i-gift"></i>
<i class="i i-leaf"></i>
<i class="i i-fire"></i>
<i class="i i-eye-open"></i>
<i class="i i-eye-close"></i>
<i class="i i-warning-sign"></i>
<i class="i i-plane"></i>
<i class="i i-calendar"></i>
<i class="i i-random"></i>
<i class="i i-comment"></i>
<i class="i i-magnet"></i>
<i class="i i-chevron-up"></i>
<i class="i i-chevron-down"></i>
<i class="i i-retweet"></i>
<i class="i i-shopping-cart"></i>
<i class="i i-folder-close"></i>
<i class="i i-folder-open"></i>
<i class="i i-resize-vertical"></i>
<i class="i i-resize-horizontal"></i>
<i class="i-arrow-left"></i>
<i class="i-arrow-right"></i>
<i class="i-arrow-up"></i>
<i class="i-arrow-down"></i>
<i class="i-share-alt"></i>
<i class="i-resize-full"></i>
<i class="i-resize-small"></i>
<i class="i-plus"></i>
<i class="i-minus"></i>
<i class="i-asterisk"></i>
<i class="i-exclamation-sign"></i>
<i class="i-gift"></i>
<i class="i-leaf"></i>
<i class="i-fire"></i>
<i class="i-eye-open"></i>
<i class="i-eye-close"></i>
<i class="i-warning-sign"></i>
<i class="i-plane"></i>
<i class="i-calendar"></i>
<i class="i-random"></i>
<i class="i-comment"></i>
<i class="i-magnet"></i>
<i class="i-chevron-up"></i>
<i class="i-chevron-down"></i>
<i class="i-retweet"></i>
<i class="i-shopping-cart"></i>
<i class="i-folder-close"></i>
<i class="i-folder-open"></i>
<i class="i-resize-vertical"></i>
<i class="i-resize-horizontal"></i>
</div>
</div>
</div>
......@@ -1457,13 +1457,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
<div class="span4">
<h3>How to use</h3>
<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>.i</code>. To use, place the following code just about anywhere:</p>
<p>With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums">
&lt;i class="i i-search"&gt;&lt;/i&gt;
&lt;i class="i-search"&gt;&lt;/i&gt;
</pre>
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
<pre class="prettyprint linenums">
&lt;i class="i i-search i-white"&gt;&lt;/i&gt;
&lt;i class="i-search i-white"&gt;&lt;/i&gt;
</pre>
<p>There are 120 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>
......@@ -1486,40 +1486,40 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-group">
<a class="btn" href="#"><i class="i i-align-left"></i></a>
<a class="btn" href="#"><i class="i i-align-center"></i></a>
<a class="btn" href="#"><i class="i i-align-right"></i></a>
<a class="btn" href="#"><i class="i i-align-justify"></i></a>
<a class="btn" href="#"><i class="i-align-left"></i></a>
<a class="btn" href="#"><i class="i-align-center"></i></a>
<a class="btn" href="#"><i class="i-align-right"></i></a>
<a class="btn" href="#"><i class="i-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="i i-pencil"></i> Edit</a></li>
<li><a href="#"><i class="i i-trash"></i> Delete</a></li>
<li><a href="#"><i class="i i-ban-circle"></i> Ban</a></li>
<li><a href="#"><i class="i-pencil"></i> Edit</a></li>
<li><a href="#"><i class="i-trash"></i> Delete</a></li>
<li><a href="#"><i class="i-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="i i-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="i i-shopping-cart i-white"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="i i-trash i-white"></i> Delete</a>
<a class="btn" href="#"><i class="i-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="i-shopping-cart i-white"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="i-trash i-white"></i> Delete</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="i i-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="i i-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="i i-info-sign i-white"></i> More Info</a>
<a class="btn btn-large" href="#"><i class="i-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="i-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="i-info-sign i-white"></i> More Info</a>
</p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="i i-home i-white"></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-home i-white"></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><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div> <!-- /well -->
......@@ -1530,7 +1530,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<label class="control-label" for="prependedInput">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="i i-envelope"></i></span>
<span class="add-on"><i class="i-envelope"></i></span>
<input class="span2" id="iconInput" type="text">
</div>
</div>
......
docs/components.html
+ 7
- 7
View file @ d533310b
......@@ -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/base-css.mustache
+ 140
- 140
View file @ d533310b
......@@ -1227,142 +1227,142 @@
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="i i-glass"></i>
<i class="i i-music"></i>
<i class="i i-search"></i>
<i class="i i-envelope"></i>
<i class="i i-heart"></i>
<i class="i i-star"></i>
<i class="i i-star-empty"></i>
<i class="i i-user"></i>
<i class="i i-film"></i>
<i class="i i-th-large"></i>
<i class="i i-th"></i>
<i class="i i-th-list"></i>
<i class="i i-ok"></i>
<i class="i i-remove"></i>
<i class="i i-zoom-in"></i>
<i class="i i-zoom-out"></i>
<i class="i i-off"></i>
<i class="i i-signal"></i>
<i class="i i-cog"></i>
<i class="i i-trash"></i>
<i class="i-glass"></i>
<i class="i-music"></i>
<i class="i-search"></i>
<i class="i-envelope"></i>
<i class="i-heart"></i>
<i class="i-star"></i>
<i class="i-star-empty"></i>
<i class="i-user"></i>
<i class="i-film"></i>
<i class="i-th-large"></i>
<i class="i-th"></i>
<i class="i-th-list"></i>
<i class="i-ok"></i>
<i class="i-remove"></i>
<i class="i-zoom-in"></i>
<i class="i-zoom-out"></i>
<i class="i-off"></i>
<i class="i-signal"></i>
<i class="i-cog"></i>
<i class="i-trash"></i>
<i class="i i-home"></i>
<i class="i i-file"></i>
<i class="i i-time"></i>
<i class="i i-road"></i>
<i class="i i-download-alt"></i>
<i class="i i-download"></i>
<i class="i i-upload"></i>
<i class="i i-inbox"></i>
<i class="i i-play-circle"></i>
<i class="i i-repeat"></i>
<i class="i-home"></i>
<i class="i-file"></i>
<i class="i-time"></i>
<i class="i-road"></i>
<i class="i-download-alt"></i>
<i class="i-download"></i>
<i class="i-upload"></i>
<i class="i-inbox"></i>
<i class="i-play-circle"></i>
<i class="i-repeat"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-refresh"></i>
<i class="i i-list-alt"></i>
<i class="i i-lock"></i>
<i class="i i-flag"></i>
<i class="i i-headphones"></i>
<i class="i i-volume-off"></i>
<i class="i i-volume-down"></i>
<i class="i i-volume-up"></i>
<i class="i i-qrcode"></i>
<i class="i i-barcode"></i>
<i class="i-refresh"></i>
<i class="i-list-alt"></i>
<i class="i-lock"></i>
<i class="i-flag"></i>
<i class="i-headphones"></i>
<i class="i-volume-off"></i>
<i class="i-volume-down"></i>
<i class="i-volume-up"></i>
<i class="i-qrcode"></i>
<i class="i-barcode"></i>
<i class="i i-tag"></i>
<i class="i i-tags"></i>
<i class="i i-book"></i>
<i class="i i-bookmark"></i>
<i class="i i-print"></i>
<i class="i i-camera"></i>
<i class="i i-font"></i>
<i class="i i-bold"></i>
<i class="i i-italic"></i>
<i class="i i-text-height"></i>
<i class="i i-text-width"></i>
<i class="i i-align-left"></i>
<i class="i i-align-center"></i>
<i class="i i-align-right"></i>
<i class="i i-align-justify"></i>
<i class="i i-list"></i>
<i class="i i-indent-left"></i>
<i class="i i-indent-right"></i>
<i class="i i-facetime-video"></i>
<i class="i i-picture"></i>
<i class="i-tag"></i>
<i class="i-tags"></i>
<i class="i-book"></i>
<i class="i-bookmark"></i>
<i class="i-print"></i>
<i class="i-camera"></i>
<i class="i-font"></i>
<i class="i-bold"></i>
<i class="i-italic"></i>
<i class="i-text-height"></i>
<i class="i-text-width"></i>
<i class="i-align-left"></i>
<i class="i-align-center"></i>
<i class="i-align-right"></i>
<i class="i-align-justify"></i>
<i class="i-list"></i>
<i class="i-indent-left"></i>
<i class="i-indent-right"></i>
<i class="i-facetime-video"></i>
<i class="i-picture"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-pencil"></i>
<i class="i i-map-marker"></i>
<i class="i i-adjust"></i>
<i class="i i-tint"></i>
<i class="i i-edit"></i>
<i class="i i-share"></i>
<i class="i i-check"></i>
<i class="i i-move"></i>
<i class="i i-step-backward"></i>
<i class="i i-fast-backward"></i>
<i class="i i-backward"></i>
<i class="i i-play"></i>
<i class="i i-pause"></i>
<i class="i i-stop"></i>
<i class="i i-forward"></i>
<i class="i i-fast-forward"></i>
<i class="i i-step-forward"></i>
<i class="i i-eject"></i>
<i class="i i-chevron-left"></i>
<i class="i i-chevron-right"></i>
<i class="i-pencil"></i>
<i class="i-map-marker"></i>
<i class="i-adjust"></i>
<i class="i-tint"></i>
<i class="i-edit"></i>
<i class="i-share"></i>
<i class="i-check"></i>
<i class="i-move"></i>
<i class="i-step-backward"></i>
<i class="i-fast-backward"></i>
<i class="i-backward"></i>
<i class="i-play"></i>
<i class="i-pause"></i>
<i class="i-stop"></i>
<i class="i-forward"></i>
<i class="i-fast-forward"></i>
<i class="i-step-forward"></i>
<i class="i-eject"></i>
<i class="i-chevron-left"></i>
<i class="i-chevron-right"></i>
<i class="i i-plus-sign"></i>
<i class="i i-minus-sign"></i>
<i class="i i-remove-sign"></i>
<i class="i i-ok-sign"></i>
<i class="i i-question-sign"></i>
<i class="i i-info-sign"></i>
<i class="i i-screenshot"></i>
<i class="i i-remove-circle"></i>
<i class="i i-ok-circle"></i>
<i class="i i-ban-circle"></i>
<i class="i-plus-sign"></i>
<i class="i-minus-sign"></i>
<i class="i-remove-sign"></i>
<i class="i-ok-sign"></i>
<i class="i-question-sign"></i>
<i class="i-info-sign"></i>
<i class="i-screenshot"></i>
<i class="i-remove-circle"></i>
<i class="i-ok-circle"></i>
<i class="i-ban-circle"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="i i-arrow-left"></i>
<i class="i i-arrow-right"></i>
<i class="i i-arrow-up"></i>
<i class="i i-arrow-down"></i>
<i class="i i-share-alt"></i>
<i class="i i-resize-full"></i>
<i class="i i-resize-small"></i>
<i class="i i-plus"></i>
<i class="i i-minus"></i>
<i class="i i-asterisk"></i>
<i class="i-arrow-left"></i>
<i class="i-arrow-right"></i>
<i class="i-arrow-up"></i>
<i class="i-arrow-down"></i>
<i class="i-share-alt"></i>
<i class="i-resize-full"></i>
<i class="i-resize-small"></i>
<i class="i-plus"></i>
<i class="i-minus"></i>
<i class="i-asterisk"></i>
<i class="i i-exclamation-sign"></i>
<i class="i i-gift"></i>
<i class="i i-leaf"></i>
<i class="i i-fire"></i>
<i class="i i-eye-open"></i>
<i class="i i-eye-close"></i>
<i class="i i-warning-sign"></i>
<i class="i i-plane"></i>
<i class="i i-calendar"></i>
<i class="i i-random"></i>
<i class="i i-comment"></i>
<i class="i i-magnet"></i>
<i class="i i-chevron-up"></i>
<i class="i i-chevron-down"></i>
<i class="i i-retweet"></i>
<i class="i i-shopping-cart"></i>
<i class="i i-folder-close"></i>
<i class="i i-folder-open"></i>
<i class="i i-resize-vertical"></i>
<i class="i i-resize-horizontal"></i>
<i class="i-exclamation-sign"></i>
<i class="i-gift"></i>
<i class="i-leaf"></i>
<i class="i-fire"></i>
<i class="i-eye-open"></i>
<i class="i-eye-close"></i>
<i class="i-warning-sign"></i>
<i class="i-plane"></i>
<i class="i-calendar"></i>
<i class="i-random"></i>
<i class="i-comment"></i>
<i class="i-magnet"></i>
<i class="i-chevron-up"></i>
<i class="i-chevron-down"></i>
<i class="i-retweet"></i>
<i class="i-shopping-cart"></i>
<i class="i-folder-close"></i>
<i class="i-folder-open"></i>
<i class="i-resize-vertical"></i>
<i class="i-resize-horizontal"></i>
</div>
</div>
</div>
......@@ -1381,13 +1381,13 @@
</div>
<div class="span4">
<h3>{{_i}}How to use{{/i}}</h3>
<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>.i</code>. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="i i-search"&gt;&lt;/i&gt;
&lt;i class="i-search"&gt;&lt;/i&gt;
</pre>
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="i i-search i-white"&gt;&lt;/i&gt;
&lt;i class="i-search i-white"&gt;&lt;/i&gt;
</pre>
<p>{{_i}}There are 120 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>
......@@ -1410,40 +1410,40 @@
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-group">
<a class="btn" href="#"><i class="i i-align-left"></i></a>
<a class="btn" href="#"><i class="i i-align-center"></i></a>
<a class="btn" href="#"><i class="i i-align-right"></i></a>
<a class="btn" href="#"><i class="i i-align-justify"></i></a>
<a class="btn" href="#"><i class="i-align-left"></i></a>
<a class="btn" href="#"><i class="i-align-center"></i></a>
<a class="btn" href="#"><i class="i-align-right"></i></a>
<a class="btn" href="#"><i class="i-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="i i-pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="i i-trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="i i-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
<li><a href="#"><i class="i-pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="i-trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="i-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="i i-refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn btn-success" href="#"><i class="i i-shopping-cart i-white"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn btn-danger" href="#"><i class="i i-trash i-white"></i> {{_i}}Delete{{/i}}</a>
<a class="btn" href="#"><i class="i-refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn btn-success" href="#"><i class="i-shopping-cart i-white"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn btn-danger" href="#"><i class="i-trash i-white"></i> {{_i}}Delete{{/i}}</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="i i-comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn btn-small" href="#"><i class="i i-cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="i i-info-sign i-white"></i> {{_i}}More Info{{/i}}</a>
<a class="btn btn-large" href="#"><i class="i-comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn btn-small" href="#"><i class="i-cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="i-info-sign i-white"></i> {{_i}}More Info{{/i}}</a>
</p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="i i-home i-white"></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-home i-white"></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><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
</ul>
</div> <!-- /well -->
......@@ -1454,7 +1454,7 @@
<label class="control-label" for="prependedInput">{{_i}}Email address{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="i i-envelope"></i></span>
<span class="add-on"><i class="i-envelope"></i></span>
<input class="span2" id="iconInput" type="text">
</div>
</div>
......
docs/templates/pages/components.mustache
+ 7
- 7
View file @ d533310b
......@@ -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
+ 1
- 1
View file @ d533310b
......@@ -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;
......
Supports Markdown
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