diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 75 |
1 files changed, 57 insertions, 18 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index cd06c6118..698b68ea1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1338,10 +1338,6 @@ <i class="icon home"></i> <i class="icon file"></i> <i class="icon time"></i> - </div> - </div> - <div class="span3"> - <div class="the-icons"> <i class="icon road"></i> <i class="icon download-alt"></i> <i class="icon download"></i> @@ -1349,8 +1345,12 @@ <i class="icon inbox"></i> <i class="icon play-circle"></i> <i class="icon repeat"></i> + </div> + </div> + <div class="span3"> + <div class="the-icons"> <i class="icon refresh"></i> - <i class="icon calendar"></i> + <i class="icon list-alt"></i> <i class="icon lock"></i> <i class="icon flag"></i> <i class="icon headphones"></i> @@ -1366,10 +1366,6 @@ <i class="icon bookmark"></i> <i class="icon print"></i> <i class="icon camera"></i> - </div> - </div> - <div class="span3"> - <div class="the-icons"> <i class="icon font"></i> <i class="icon bold"></i> <i class="icon italic"></i> @@ -1384,7 +1380,10 @@ <i class="icon indent-right"></i> <i class="icon facetime-video"></i> <i class="icon picture"></i> - + </div> + </div> + <div class="span3"> + <div class="the-icons"> <i class="icon pencil"></i> <i class="icon map-marker"></i> <i class="icon adjust"></i> @@ -1394,10 +1393,6 @@ <i class="icon check"></i> <i class="icon move"></i> <i class="icon step-backward"></i> - </div> - </div> - <div class="span3"> - <div class="the-icons"> <i class="icon fast-backward"></i> <i class="icon backward"></i> <i class="icon play"></i> @@ -1410,6 +1405,20 @@ <i class="icon chevron-left"></i> <i class="icon chevron-right"></i> + <i class="icon plus-sign"></i> + <i class="icon minus-sign"></i> + <i class="icon remove-sign"></i> + <i class="icon ok-sign"></i> + <i class="icon question-sign"></i> + <i class="icon info-sign"></i> + <i class="icon screenshot"></i> + <i class="icon remove-circle"></i> + <i class="icon ok-circle"></i> + <i class="icon ban-circle"></i> + </div> + </div> + <div class="span3"> + <div class="the-icons"> <i class="icon arrow-left"></i> <i class="icon arrow-right"></i> <i class="icon arrow-up"></i> @@ -1420,11 +1429,32 @@ <i class="icon plus"></i> <i class="icon minus"></i> <i class="icon asterisk"></i> + + <i class="icon exclamation-sign"></i> + <i class="icon gift"></i> + <i class="icon leaf"></i> + <i class="icon fire"></i> + <i class="icon eye-open"></i> + <i class="icon eye-close"></i> + <i class="icon warning-sign"></i> + <i class="icon plane"></i> + <i class="icon calendar"></i> + <i class="icon random"></i> + <i class="icon comment"></i> + <i class="icon magnet"></i> + <i class="icon chevron-up"></i> + <i class="icon chevron-down"></i> + <i class="icon retweet"></i> + <i class="icon shopping-cart"></i> + <i class="icon folder-close"></i> + <i class="icon folder-open"></i> + <i class="icon resize-vertical"></i> + <i class="icon resize-horizontal"></i> </div> </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. + <strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size. </div> <br> @@ -1441,7 +1471,11 @@ <pre class="prettyprint linenums"> <i class="icon search"></i> </pre> - <p>There are over 100 classes to choose from for your icons. Just add an <code><i></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> + <p>There are also styles available for inverted (white) icons, made ready with one extra class:</p> +<pre class="prettyprint linenums"> +<i class="icon white search"></i> +</pre> + <p>There are 120 classes to choose from for your icons. Just add an <code><i></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> @@ -1458,11 +1492,12 @@ <h3>Examples</h3> <div class="row"> - <div class="span4"> + <div class="span6"> <p>Use them in buttons, or in button groups for a toolbar style presentation.</p> <p> <a class="btn" href="#"><i class="icon refresh"></i> Refresh</a> - <a class="btn" href="#"><i class="icon cog"></i> Settings</a> + <a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a> + <a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a> </p> <div class="btn-toolbar"> <div class="btn-group"> @@ -1477,6 +1512,10 @@ <a class="btn" href="#"><i class="icon align-justify"></i></a> </div> </div> + <p> + <a class="btn large" href="#"><i class="icon refresh"></i> Refresh</a> + <a class="btn small" href="#"><i class="icon cog"></i> Settings</a> + </p> </div> <div class="span3"> <p>Or, use them in navigation.</p> |