mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 21:09:06 +02:00
tweaks abound, updated prettify styles, new sidenav component started, sprite icons started
This commit is contained in:
Mark Otto
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user