Skip to content

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

update icons everywhere to be scoped per other components, fix broken elements on js docs page

parent 31911659
Hide whitespace changes
Inline Side-by-side
Showing with 575 additions and 572 deletions
docs/assets/css/bootstrap.css
View file @ 47a68ae3
......@@ -1112,380 +1112,380 @@ table .span12 {
width: 924px;
margin-left: 0;
}
.icon {
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
.i {
display: inline-block;
vertical-align: text-top;
width: 14px;
height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
.icon:last-child {
.i:last-child {
*margin-left: 0;
}
.icon.white {
.i-white {
background-image: url(../img/glyphicons-halflings-white.png);
}
.icon.glass {
.i-glass {
background-position: 0 0;
}
.icon.music {
.i-music {
background-position: -24px 0;
}
.icon.search {
.i-search {
background-position: -48px 0;
}
.icon.envelope {
.i-envelope {
background-position: -72px 0;
}
.icon.heart {
.i-heart {
background-position: -96px 0;
}
.icon.star {
.i-star {
background-position: -120px 0;
}
.icon.star-empty {
.i-star-empty {
background-position: -144px 0;
}
.icon.user {
.i-user {
background-position: -168px 0;
}
.icon.film {
.i-film {
background-position: -192px 0;
}
.icon.th-large {
.i-th-large {
background-position: -216px 0;
}
.icon.th {
.i-th {
background-position: -240px 0;
}
.icon.th-list {
.i-th-list {
background-position: -264px 0;
}
.icon.ok {
.i-ok {
background-position: -288px 0;
}
.icon.remove {
.i-remove {
background-position: -312px 0;
}
.icon.zoom-in {
.i-zoom-in {
background-position: -336px 0;
}
.icon.zoom-out {
.i-zoom-out {
background-position: -360px 0;
}
.icon.off {
.i-off {
background-position: -384px 0;
}
.icon.signal {
.i-signal {
background-position: -408px 0;
}
.icon.cog {
.i-cog {
background-position: -432px 0;
}
.icon.trash {
.i-trash {
background-position: -456px 0;
}
.icon.home {
.i-home {
background-position: 0 -24px;
}
.icon.file {
.i-file {
background-position: -24px -24px;
}
.icon.time {
.i-time {
background-position: -48px -24px;
}
.icon.road {
.i-road {
background-position: -72px -24px;
}
.icon.download-alt {
.i-download-alt {
background-position: -96px -24px;
}
.icon.download {
.i-download {
background-position: -120px -24px;
}
.icon.upload {
.i-upload {
background-position: -144px -24px;
}
.icon.inbox {
.i-inbox {
background-position: -168px -24px;
}
.icon.play-circle {
.i-play-circle {
background-position: -192px -24px;
}
.icon.repeat {
.i-repeat {
background-position: -216px -24px;
}
.icon.refresh {
.i-refresh {
background-position: -240px -24px;
}
.icon.list-alt {
.i-list-alt {
background-position: -264px -24px;
}
.icon.lock {
.i-lock {
background-position: -287px -24px;
}
.icon.flag {
.i-flag {
background-position: -312px -24px;
}
.icon.headphones {
.i-headphones {
background-position: -336px -24px;
}
.icon.volume-off {
.i-volume-off {
background-position: -360px -24px;
}
.icon.volume-down {
.i-volume-down {
background-position: -384px -24px;
}
.icon.volume-up {
.i-volume-up {
background-position: -408px -24px;
}
.icon.qrcode {
.i-qrcode {
background-position: -432px -24px;
}
.icon.barcode {
.i-barcode {
background-position: -456px -24px;
}
.icon.tag {
.i-tag {
background-position: 0 -48px;
}
.icon.tags {
.i-tags {
background-position: -25px -48px;
}
.icon.book {
.i-book {
background-position: -48px -48px;
}
.icon.bookmark {
.i-bookmark {
background-position: -72px -48px;
}
.icon.print {
.i-print {
background-position: -96px -48px;
}
.icon.camera {
.i-camera {
background-position: -120px -48px;
}
.icon.font {
.i-font {
background-position: -144px -48px;
}
.icon.bold {
.i-bold {
background-position: -167px -48px;
}
.icon.italic {
.i-italic {
background-position: -192px -48px;
}
.icon.text-height {
.i-text-height {
background-position: -216px -48px;
}
.icon.text-width {
.i-text-width {
background-position: -240px -48px;
}
.icon.align-left {
.i-align-left {
background-position: -264px -48px;
}
.icon.align-center {
.i-align-center {
background-position: -288px -48px;
}
.icon.align-right {
.i-align-right {
background-position: -312px -48px;
}
.icon.align-justify {
.i-align-justify {
background-position: -336px -48px;
}
.icon.list {
.i-list {
background-position: -360px -48px;
}
.icon.indent-left {
.i-indent-left {
background-position: -384px -48px;
}
.icon.indent-right {
.i-indent-right {
background-position: -408px -48px;
}
.icon.facetime-video {
.i-facetime-video {
background-position: -432px -48px;
}
.icon.picture {
.i-picture {
background-position: -456px -48px;
}
.icon.pencil {
.i-pencil {
background-position: 0 -72px;
}
.icon.map-marker {
.i-map-marker {
background-position: -24px -72px;
}
.icon.adjust {
.i-adjust {
background-position: -48px -72px;
}
.icon.tint {
.i-tint {
background-position: -72px -72px;
}
.icon.edit {
.i-edit {
background-position: -96px -72px;
}
.icon.share {
.i-share {
background-position: -120px -72px;
}
.icon.check {
.i-check {
background-position: -144px -72px;
}
.icon.move {
.i-move {
background-position: -168px -72px;
}
.icon.step-backward {
.i-step-backward {
background-position: -192px -72px;
}
.icon.fast-backward {
.i-fast-backward {
background-position: -216px -72px;
}
.icon.backward {
.i-backward {
background-position: -240px -72px;
}
.icon.play {
.i-play {
background-position: -264px -72px;
}
.icon.pause {
.i-pause {
background-position: -288px -72px;
}
.icon.stop {
.i-stop {
background-position: -312px -72px;
}
.icon.forward {
.i-forward {
background-position: -336px -72px;
}
.icon.fast-forward {
.i-fast-forward {
background-position: -360px -72px;
}
.icon.step-forward {
.i-step-forward {
background-position: -384px -72px;
}
.icon.eject {
.i-eject {
background-position: -408px -72px;
}
.icon.chevron-left {
.i-chevron-left {
background-position: -432px -72px;
}
.icon.chevron-right {
.i-chevron-right {
background-position: -456px -72px;
}
.icon.plus-sign {
.i-plus-sign {
background-position: 0 -96px;
}
.icon.minus-sign {
.i-minus-sign {
background-position: -24px -96px;
}
.icon.remove-sign {
.i-remove-sign {
background-position: -48px -96px;
}
.icon.ok-sign {
.i-ok-sign {
background-position: -72px -96px;
}
.icon.question-sign {
.i-question-sign {
background-position: -96px -96px;
}
.icon.info-sign {
.i-info-sign {
background-position: -120px -96px;
}
.icon.screenshot {
.i-screenshot {
background-position: -144px -96px;
}
.icon.remove-circle {
.i-remove-circle {
background-position: -168px -96px;
}
.icon.ok-circle {
.i-ok-circle {
background-position: -192px -96px;
}
.icon.ban-circle {
.i-ban-circle {
background-position: -216px -96px;
}
.icon.arrow-left {
.i-arrow-left {
background-position: -240px -96px;
}
.icon.arrow-right {
.i-arrow-right {
background-position: -264px -96px;
}
.icon.arrow-up {
.i-arrow-up {
background-position: -289px -96px;
}
.icon.arrow-down {
.i-arrow-down {
background-position: -312px -96px;
}
.icon.share-alt {
.i-share-alt {
background-position: -336px -96px;
}
.icon.resize-full {
.i-resize-full {
background-position: -360px -96px;
}
.icon.resize-small {
.i-resize-small {
background-position: -384px -96px;
}
.icon.plus {
.i-plus {
background-position: -408px -96px;
}
.icon.minus {
.i-minus {
background-position: -433px -96px;
}
.icon.asterisk {
.i-asterisk {
background-position: -456px -96px;
}
.icon.exclamation-sign {
.i-exclamation-sign {
background-position: 0 -120px;
}
.icon.gift {
.i-gift {
background-position: -24px -120px;
}
.icon.leaf {
.i-leaf {
background-position: -48px -120px;
}
.icon.fire {
.i-fire {
background-position: -72px -120px;
}
.icon.eye-open {
.i-eye-open {
background-position: -96px -120px;
}
.icon.eye-close {
.i-eye-close {
background-position: -120px -120px;
}
.icon.warning-sign {
.i-warning-sign {
background-position: -144px -120px;
}
.icon.plane {
.i-plane {
background-position: -168px -120px;
}
.icon.calendar {
.i-calendar {
background-position: -192px -120px;
}
.icon.random {
.i-random {
background-position: -216px -120px;
}
.icon.comment {
.i-comment {
background-position: -240px -120px;
}
.icon.magnet {
.i-magnet {
background-position: -264px -120px;
}
.icon.chevron-up {
.i-chevron-up {
background-position: -288px -120px;
}
.icon.chevron-down {
.i-chevron-down {
background-position: -313px -119px;
}
.icon.retweet {
.i-retweet {
background-position: -336px -120px;
}
.icon.shopping-cart {
.i-shopping-cart {
background-position: -360px -120px;
}
.icon.folder-close {
.i-folder-close {
background-position: -384px -120px;
}
.icon.folder-open {
.i-folder-open {
background-position: -408px -120px;
}
.icon.resize-vertical {
.i-resize-vertical {
background-position: -432px -119px;
}
.icon.resize-horizontal {
.i-resize-horizontal {
background-position: -456px -118px;
}
.dropdown {
......
docs/assets/css/docs.css
View file @ 47a68ae3
......@@ -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
View file @ 47a68ae3
......@@ -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="icon glass"></i>
<i class="icon music"></i>
<i class="icon search"></i>
<i class="icon envelope"></i>
<i class="icon heart"></i>
<i class="icon star"></i>
<i class="icon star-empty"></i>
<i class="icon user"></i>
<i class="icon film"></i>
<i class="icon th-large"></i>
<i class="icon th"></i>
<i class="icon th-list"></i>
<i class="icon ok"></i>
<i class="icon remove"></i>
<i class="icon zoom-in"></i>
<i class="icon zoom-out"></i>
<i class="icon off"></i>
<i class="icon signal"></i>
<i class="icon cog"></i>
<i class="icon trash"></i>
<i class="icon home"></i>
<i class="icon file"></i>
<i class="icon time"></i>
<i class="icon road"></i>
<i class="icon download-alt"></i>
<i class="icon download"></i>
<i class="icon upload"></i>
<i class="icon inbox"></i>
<i class="icon play-circle"></i>
<i class="icon repeat"></i>
<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>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon refresh"></i>
<i class="icon list-alt"></i>
<i class="icon lock"></i>
<i class="icon flag"></i>
<i class="icon headphones"></i>
<i class="icon volume-off"></i>
<i class="icon volume-down"></i>
<i class="icon volume-up"></i>
<i class="icon qrcode"></i>
<i class="icon barcode"></i>
<i class="icon tag"></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>
<i class="icon font"></i>
<i class="icon bold"></i>
<i class="icon italic"></i>
<i class="icon text-height"></i>
<i class="icon text-width"></i>
<i class="icon align-left"></i>
<i class="icon align-center"></i>
<i class="icon align-right"></i>
<i class="icon align-justify"></i>
<i class="icon list"></i>
<i class="icon indent-left"></i>
<i class="icon indent-right"></i>
<i class="icon facetime-video"></i>
<i class="icon picture"></i>
<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>
</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>
<i class="icon tint"></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>
<i class="icon fast-backward"></i>
<i class="icon backward"></i>
<i class="icon play"></i>
<i class="icon pause"></i>
<i class="icon stop"></i>
<i class="icon forward"></i>
<i class="icon fast-forward"></i>
<i class="icon step-forward"></i>
<i class="icon eject"></i>
<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>
<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>
</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>
<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>
<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>
<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>
</div>
</div>
</div>
......@@ -1452,17 +1452,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<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&mdash;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>
<p>All icons classes are prefixed with <code>.i-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</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 here in the docs. Please consider doing the same in your projects.</p>
</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>.icon</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 with a base class of <code>.i</code>. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums">
&lt;i class="icon search"&gt;&lt;/i&gt;
&lt;i class="i 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="icon white search"&gt;&lt;/i&gt;
&lt;i class="i 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>
......@@ -1485,41 +1486,41 @@ 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="icon align-left"></i></a>
<a class="btn" href="#"><i class="icon align-center"></i></a>
<a class="btn" href="#"><i class="icon align-right"></i></a>
<a class="btn" href="#"><i class="icon align-justify"></i></a>
<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>
</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="icon pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon trash"></i> Delete</a></li>
<li><a href="#"><i class="icon ban-circle"></i> Ban</a></li>
<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 class="divider"></li>
<li><a href="#"><i class="icon"></i> Make admin</a></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="icon white trash"></i> Delete</a>
<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>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="icon cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> More Info</a>
<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>
</p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
<li><a href="#"><i class="icon book"></i> Library</a></li>
<li><a href="#"><i class="icon pencil"></i> Applications</a></li>
<li><a href="#"><i class="icon"></i> Misc</a></li>
<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><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div> <!-- /well -->
</div>
......@@ -1529,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="icon envelope"></i></span>
<span class="add-on"><i class="i i-envelope"></i></span>
<input class="span2" id="iconInput" type="text">
</div>
</div>
......
docs/components.html
View file @ 47a68ae3
......@@ -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="icon white home"></i> Home</a></li>
<li><a href="#"><i class="icon book"></i> Library</a></li>
<li><a href="#"><i class="icon pencil"></i> Applications</a></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="nav-header">Another list header</li>
<li><a href="#"><i class="icon user"></i> Profile</a></li>
<li><a href="#"><i class="icon cog"></i> Settings</a></li>
<li><a href="#"><i class="icon flag"></i> Help</a></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>
</ul>
</div> <!-- /well -->
<pre class="prettyprint linenums">
......@@ -562,7 +562,7 @@
...
&lt;li&gt;
&lt;a href="#"&gt;
&lt;i class="icon book"&gt;&lt;/i&gt;
&lt;i class="i i-book"&gt;&lt;/i&gt;
Library
&lt;/a&gt;
&lt;/li&gt;
......
docs/javascript.html
View file @ 47a68ae3
......@@ -412,7 +412,7 @@ $('#myModal').on('hidden', function () {
</div>
</div> <!-- /navbar-example -->
<ul class="nav pills">
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
......@@ -592,7 +592,7 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns">
<h2>Example tabs</h2>
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
<ul id="tab" class="nav tabs">
<ul id="tab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
......
docs/templates/pages/base-css.mustache
View file @ 47a68ae3
......@@ -1227,142 +1227,142 @@
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="icon glass"></i>
<i class="icon music"></i>
<i class="icon search"></i>
<i class="icon envelope"></i>
<i class="icon heart"></i>
<i class="icon star"></i>
<i class="icon star-empty"></i>
<i class="icon user"></i>
<i class="icon film"></i>
<i class="icon th-large"></i>
<i class="icon th"></i>
<i class="icon th-list"></i>
<i class="icon ok"></i>
<i class="icon remove"></i>
<i class="icon zoom-in"></i>
<i class="icon zoom-out"></i>
<i class="icon off"></i>
<i class="icon signal"></i>
<i class="icon cog"></i>
<i class="icon trash"></i>
<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="icon home"></i>
<i class="icon file"></i>
<i class="icon time"></i>
<i class="icon road"></i>
<i class="icon download-alt"></i>
<i class="icon download"></i>
<i class="icon upload"></i>
<i class="icon inbox"></i>
<i class="icon play-circle"></i>
<i class="icon repeat"></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>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon refresh"></i>
<i class="icon list-alt"></i>
<i class="icon lock"></i>
<i class="icon flag"></i>
<i class="icon headphones"></i>
<i class="icon volume-off"></i>
<i class="icon volume-down"></i>
<i class="icon volume-up"></i>
<i class="icon qrcode"></i>
<i class="icon barcode"></i>
<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="icon tag"></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>
<i class="icon font"></i>
<i class="icon bold"></i>
<i class="icon italic"></i>
<i class="icon text-height"></i>
<i class="icon text-width"></i>
<i class="icon align-left"></i>
<i class="icon align-center"></i>
<i class="icon align-right"></i>
<i class="icon align-justify"></i>
<i class="icon list"></i>
<i class="icon indent-left"></i>
<i class="icon indent-right"></i>
<i class="icon facetime-video"></i>
<i class="icon picture"></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>
</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>
<i class="icon tint"></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>
<i class="icon fast-backward"></i>
<i class="icon backward"></i>
<i class="icon play"></i>
<i class="icon pause"></i>
<i class="icon stop"></i>
<i class="icon forward"></i>
<i class="icon fast-forward"></i>
<i class="icon step-forward"></i>
<i class="icon eject"></i>
<i class="icon chevron-left"></i>
<i class="icon chevron-right"></i>
<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="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>
<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>
</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>
<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>
<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="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>
<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>
</div>
</div>
</div>
......@@ -1376,17 +1376,18 @@
<div class="span4">
<h3>{{_i}}Built as a sprite{{/i}}</h3>
<p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite&mdash;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.{{/i}}</p>
<p>{{_i}}<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.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.i-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}<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 here in the docs. Please consider doing the same in your projects.{{/i}}</p>
</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>.icon</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 with a base class of <code>.i</code>. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon search"&gt;&lt;/i&gt;
&lt;i class="i 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="icon white search"&gt;&lt;/i&gt;
&lt;i class="i 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>
......@@ -1409,41 +1410,41 @@
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-group">
<a class="btn" href="#"><i class="icon align-left"></i></a>
<a class="btn" href="#"><i class="icon align-center"></i></a>
<a class="btn" href="#"><i class="icon align-right"></i></a>
<a class="btn" href="#"><i class="icon align-justify"></i></a>
<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>
</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="icon pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="icon ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
<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 class="divider"></li>
<li><a href="#"><i class="icon"></i> {{_i}}Make admin{{/i}}</a></li>
<li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn btn-danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
<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>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn btn-small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
<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>
</p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
<li><a href="#"><i class="icon"></i> {{_i}}Misc{{/i}}</a></li>
<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><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
</ul>
</div> <!-- /well -->
</div>
......@@ -1453,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="icon envelope"></i></span>
<span class="add-on"><i class="i i-envelope"></i></span>
<input class="span2" id="iconInput" type="text">
</div>
</div>
......
docs/templates/pages/components.mustache
View file @ 47a68ae3
......@@ -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="icon white home"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></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="nav-header">{{_i}}Another list header{{/i}}</li>
<li><a href="#"><i class="icon user"></i> {{_i}}Profile{{/i}}</a></li>
<li><a href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a></li>
<li><a href="#"><i class="icon flag"></i> {{_i}}Help{{/i}}</a></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>
</ul>
</div> <!-- /well -->
<pre class="prettyprint linenums">
......@@ -486,7 +486,7 @@
...
&lt;li&gt;
&lt;a href="#"&gt;
&lt;i class="icon book"&gt;&lt;/i&gt;
&lt;i class="i i-book"&gt;&lt;/i&gt;
{{_i}}Library{{/i}}
&lt;/a&gt;
&lt;/li&gt;
......
docs/templates/pages/javascript.mustache
View file @ 47a68ae3
......@@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
</div>
</div> <!-- /navbar-example -->
<ul class="nav pills">
<ul class="nav nav-pills">
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
......@@ -516,7 +516,7 @@ $('#myModal').on('hidden', function () {
<div class="span9 columns">
<h2>{{_i}}Example tabs{{/i}}</h2>
<p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
<ul id="tab" class="nav tabs">
<ul id="tab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
<li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
<li class="dropdown">
......
less/sprites.less
View file @ 47a68ae3
......@@ -6,150 +6,151 @@
// ICONS
// -----
// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set.
// All icons receive the styles of the <i> tag with a base class of .icon
// and are then given a unique class to add width, height, and
// background-position. Your resulting HTML will look like this:
// <i class="icon inbox"></i>. And for the white version of the icons, just
// add the .white class like this: <i class="icon white inbox"></i>
// All icons receive the styles of the <i> tag with a base class
// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
// <i class="i i-inbox"></i>.
.icon {
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
// For the white version of the icons, just add the .i-white class:
// <i class="i i-inbox i-white"></i>
.i {
display: inline-block;
vertical-align: text-top;
width: 14px;
height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon.white {
.i-white {
background-image: url(../img/glyphicons-halflings-white.png);
}
.icon.glass { background-position: 0 0; }
.icon.music { background-position: -24px 0; }
.icon.search { background-position: -48px 0; }
.icon.envelope { background-position: -72px 0; }
.icon.heart { background-position: -96px 0; }
.icon.star { background-position: -120px 0; }
.icon.star-empty { background-position: -144px 0; }
.icon.user { background-position: -168px 0; }
.icon.film { background-position: -192px 0; }
.icon.th-large { background-position: -216px 0; }
.icon.th { background-position: -240px 0; }
.icon.th-list { background-position: -264px 0; }
.icon.ok { background-position: -288px 0; }
.icon.remove { background-position: -312px 0; }
.icon.zoom-in { background-position: -336px 0; }
.icon.zoom-out { background-position: -360px 0; }
.icon.off { background-position: -384px 0; }
.icon.signal { background-position: -408px 0; }
.icon.cog { background-position: -432px 0; }
.icon.trash { background-position: -456px 0; }
.i-glass { background-position: 0 0; }
.i-music { background-position: -24px 0; }
.i-search { background-position: -48px 0; }
.i-envelope { background-position: -72px 0; }
.i-heart { background-position: -96px 0; }
.i-star { background-position: -120px 0; }
.i-star-empty { background-position: -144px 0; }
.i-user { background-position: -168px 0; }
.i-film { background-position: -192px 0; }
.i-th-large { background-position: -216px 0; }
.i-th { background-position: -240px 0; }
.i-th-list { background-position: -264px 0; }
.i-ok { background-position: -288px 0; }
.i-remove { background-position: -312px 0; }
.i-zoom-in { background-position: -336px 0; }
.i-zoom-out { background-position: -360px 0; }
.i-off { background-position: -384px 0; }
.i-signal { background-position: -408px 0; }
.i-cog { background-position: -432px 0; }
.i-trash { background-position: -456px 0; }
.icon.home { background-position: 0 -24px; }
.icon.file { background-position: -24px -24px; }
.icon.time { background-position: -48px -24px; }
.icon.road { background-position: -72px -24px; }
.icon.download-alt { background-position: -96px -24px; }
.icon.download { background-position: -120px -24px; }
.icon.upload { background-position: -144px -24px; }
.icon.inbox { background-position: -168px -24px; }
.icon.play-circle { background-position: -192px -24px; }
.icon.repeat { background-position: -216px -24px; }
.icon.refresh { background-position: -240px -24px; }
.icon.list-alt { background-position: -264px -24px; }
.icon.lock { background-position: -287px -24px; } // 1px off
.icon.flag { background-position: -312px -24px; }
.icon.headphones { background-position: -336px -24px; }
.icon.volume-off { background-position: -360px -24px; }
.icon.volume-down { background-position: -384px -24px; }
.icon.volume-up { background-position: -408px -24px; }
.icon.qrcode { background-position: -432px -24px; }
.icon.barcode { background-position: -456px -24px; }
.i-home { background-position: 0 -24px; }
.i-file { background-position: -24px -24px; }
.i-time { background-position: -48px -24px; }
.i-road { background-position: -72px -24px; }
.i-download-alt { background-position: -96px -24px; }
.i-download { background-position: -120px -24px; }
.i-upload { background-position: -144px -24px; }
.i-inbox { background-position: -168px -24px; }
.i-play-circle { background-position: -192px -24px; }
.i-repeat { background-position: -216px -24px; }
.i-refresh { background-position: -240px -24px; }
.i-list-alt { background-position: -264px -24px; }
.i-lock { background-position: -287px -24px; } // 1px off
.i-flag { background-position: -312px -24px; }
.i-headphones { background-position: -336px -24px; }
.i-volume-off { background-position: -360px -24px; }
.i-volume-down { background-position: -384px -24px; }
.i-volume-up { background-position: -408px -24px; }
.i-qrcode { background-position: -432px -24px; }
.i-barcode { background-position: -456px -24px; }
.icon.tag { background-position: 0 -48px; }
.icon.tags { background-position: -25px -48px; } // 1px off
.icon.book { background-position: -48px -48px; }
.icon.bookmark { background-position: -72px -48px; }
.icon.print { background-position: -96px -48px; }
.icon.camera { background-position: -120px -48px; }
.icon.font { background-position: -144px -48px; }
.icon.bold { background-position: -167px -48px; } // 1px off
.icon.italic { background-position: -192px -48px; }
.icon.text-height { background-position: -216px -48px; }
.icon.text-width { background-position: -240px -48px; }
.icon.align-left { background-position: -264px -48px; }
.icon.align-center { background-position: -288px -48px; }
.icon.align-right { background-position: -312px -48px; }
.icon.align-justify { background-position: -336px -48px; }
.icon.list { background-position: -360px -48px; }
.icon.indent-left { background-position: -384px -48px; }
.icon.indent-right { background-position: -408px -48px; }
.icon.facetime-video { background-position: -432px -48px; }
.icon.picture { background-position: -456px -48px; }
.i-tag { background-position: 0 -48px; }
.i-tags { background-position: -25px -48px; } // 1px off
.i-book { background-position: -48px -48px; }
.i-bookmark { background-position: -72px -48px; }
.i-print { background-position: -96px -48px; }
.i-camera { background-position: -120px -48px; }
.i-font { background-position: -144px -48px; }
.i-bold { background-position: -167px -48px; } // 1px off
.i-italic { background-position: -192px -48px; }
.i-text-height { background-position: -216px -48px; }
.i-text-width { background-position: -240px -48px; }
.i-align-left { background-position: -264px -48px; }
.i-align-center { background-position: -288px -48px; }
.i-align-right { background-position: -312px -48px; }
.i-align-justify { background-position: -336px -48px; }
.i-list { background-position: -360px -48px; }
.i-indent-left { background-position: -384px -48px; }
.i-indent-right { background-position: -408px -48px; }
.i-facetime-video { background-position: -432px -48px; }
.i-picture { background-position: -456px -48px; }
.icon.pencil { background-position: 0 -72px; }
.icon.map-marker { background-position: -24px -72px; }
.icon.adjust { background-position: -48px -72px; }
.icon.tint { background-position: -72px -72px; }
.icon.edit { background-position: -96px -72px; }
.icon.share { background-position: -120px -72px; }
.icon.check { background-position: -144px -72px; }
.icon.move { background-position: -168px -72px; }
.icon.step-backward { background-position: -192px -72px; }
.icon.fast-backward { background-position: -216px -72px; }
.icon.backward { background-position: -240px -72px; }
.icon.play { background-position: -264px -72px; }
.icon.pause { background-position: -288px -72px; }
.icon.stop { background-position: -312px -72px; }
.icon.forward { background-position: -336px -72px; }
.icon.fast-forward { background-position: -360px -72px; }
.icon.step-forward { background-position: -384px -72px; }
.icon.eject { background-position: -408px -72px; }
.icon.chevron-left { background-position: -432px -72px; }
.icon.chevron-right { background-position: -456px -72px; }
.i-pencil { background-position: 0 -72px; }
.i-map-marker { background-position: -24px -72px; }
.i-adjust { background-position: -48px -72px; }
.i-tint { background-position: -72px -72px; }
.i-edit { background-position: -96px -72px; }
.i-share { background-position: -120px -72px; }
.i-check { background-position: -144px -72px; }
.i-move { background-position: -168px -72px; }
.i-step-backward { background-position: -192px -72px; }
.i-fast-backward { background-position: -216px -72px; }
.i-backward { background-position: -240px -72px; }
.i-play { background-position: -264px -72px; }
.i-pause { background-position: -288px -72px; }
.i-stop { background-position: -312px -72px; }
.i-forward { background-position: -336px -72px; }
.i-fast-forward { background-position: -360px -72px; }
.i-step-forward { background-position: -384px -72px; }
.i-eject { background-position: -408px -72px; }
.i-chevron-left { background-position: -432px -72px; }
.i-chevron-right { background-position: -456px -72px; }
.icon.plus-sign { background-position: 0 -96px; }
.icon.minus-sign { background-position: -24px -96px; }
.icon.remove-sign { background-position: -48px -96px; }
.icon.ok-sign { background-position: -72px -96px; }
.icon.question-sign { background-position: -96px -96px; }
.icon.info-sign { background-position: -120px -96px; }
.icon.screenshot { background-position: -144px -96px; }
.icon.remove-circle { background-position: -168px -96px; }
.icon.ok-circle { background-position: -192px -96px; }
.icon.ban-circle { background-position: -216px -96px; }
.icon.arrow-left { background-position: -240px -96px; }
.icon.arrow-right { background-position: -264px -96px; }
.icon.arrow-up { background-position: -289px -96px; } // 1px off
.icon.arrow-down { background-position: -312px -96px; }
.icon.share-alt { background-position: -336px -96px; }
.icon.resize-full { background-position: -360px -96px; }
.icon.resize-small { background-position: -384px -96px; }
.icon.plus { background-position: -408px -96px; }
.icon.minus { background-position: -433px -96px; }
.icon.asterisk { background-position: -456px -96px; }
.i-plus-sign { background-position: 0 -96px; }
.i-minus-sign { background-position: -24px -96px; }
.i-remove-sign { background-position: -48px -96px; }
.i-ok-sign { background-position: -72px -96px; }
.i-question-sign { background-position: -96px -96px; }
.i-info-sign { background-position: -120px -96px; }
.i-screenshot { background-position: -144px -96px; }
.i-remove-circle { background-position: -168px -96px; }
.i-ok-circle { background-position: -192px -96px; }
.i-ban-circle { background-position: -216px -96px; }
.i-arrow-left { background-position: -240px -96px; }
.i-arrow-right { background-position: -264px -96px; }
.i-arrow-up { background-position: -289px -96px; } // 1px off
.i-arrow-down { background-position: -312px -96px; }
.i-share-alt { background-position: -336px -96px; }
.i-resize-full { background-position: -360px -96px; }
.i-resize-small { background-position: -384px -96px; }
.i-plus { background-position: -408px -96px; }
.i-minus { background-position: -433px -96px; }
.i-asterisk { background-position: -456px -96px; }
.icon.exclamation-sign { background-position: 0 -120px; }
.icon.gift { background-position: -24px -120px; }
.icon.leaf { background-position: -48px -120px; }
.icon.fire { background-position: -72px -120px; }
.icon.eye-open { background-position: -96px -120px; }
.icon.eye-close { background-position: -120px -120px; }
.icon.warning-sign { background-position: -144px -120px; }
.icon.plane { background-position: -168px -120px; }
.icon.calendar { background-position: -192px -120px; }
.icon.random { background-position: -216px -120px; }
.icon.comment { background-position: -240px -120px; }
.icon.magnet { background-position: -264px -120px; }
.icon.chevron-up { background-position: -288px -120px; }
.icon.chevron-down { background-position: -313px -119px; } // 1px off
.icon.retweet { background-position: -336px -120px; }
.icon.shopping-cart { background-position: -360px -120px; }
.icon.folder-close { background-position: -384px -120px; }
.icon.folder-open { background-position: -408px -120px; }
.icon.resize-vertical { background-position: -432px -119px; }
.icon.resize-horizontal { background-position: -456px -118px; }
.i-exclamation-sign { background-position: 0 -120px; }
.i-gift { background-position: -24px -120px; }
.i-leaf { background-position: -48px -120px; }
.i-fire { background-position: -72px -120px; }
.i-eye-open { background-position: -96px -120px; }
.i-eye-close { background-position: -120px -120px; }
.i-warning-sign { background-position: -144px -120px; }
.i-plane { background-position: -168px -120px; }
.i-calendar { background-position: -192px -120px; }
.i-random { background-position: -216px -120px; }
.i-comment { background-position: -240px -120px; }
.i-magnet { background-position: -264px -120px; }
.i-chevron-up { background-position: -288px -120px; }
.i-chevron-down { background-position: -313px -119px; } // 1px off
.i-retweet { background-position: -336px -120px; }
.i-shopping-cart { background-position: -360px -120px; }
.i-folder-close { background-position: -384px -120px; }
.i-folder-open { background-position: -408px -120px; }
.i-resize-vertical { background-position: -432px -119px; }
.i-resize-horizontal { background-position: -456px -118px; }
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