diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 2bc6f49fb..c07263495 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1175,6 +1175,158 @@ Form states </section> + +<!-- Icons +================================================== --> +<section id="icons"> + <div class="page-header"> + <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="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> + </div> + </div> + <div class="span2"> + <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> + </div> + </div> + <div class="span2"> + <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-foward"></i> + <i class="eject"></i> + <i class="chevron-left"></i> + <i class="chevron-right"></i> + </div> + </div> + <div class="span2"> + <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"></i> + <i class="resize-full"></i> + <i class="resize-small"></i> + <i class="plus"></i> + <i class="minus"></i> + <i class="asterisk"></i> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span4"> + <h3>Built as a sprite</h3> + <p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> + <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.</p> + </div> + <div class="span4"> + <h3>How to use</h3> + <p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p> +<pre class="prettyprint"> +<i class="chevron-left"></i> +</pre> + <p>There are over 100 classes to choose from for your icons. Just add an <code><i></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> + </div> + <div class="span4"> + <h3>Use cases</h3> + <p>Icons are great, but where would one use them? Here are a few ideas:</p> + <ul> + <li>As visuals for your sidebar navigation</li> + <li>For a purely icon-driven nav</li> + <li>For buttons to help convey the meaning of an action</li> + <li>With links to share context on a user's destination</li> + </ul> + <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> + </div> + </div> +</section> + + + <!-- Footer ================================================== --> <footer class="footer"> |