adding icon classes to finish off glyphicons 1.6 update

This commit is contained in:
Mark Otto 2012-04-14 17:15:16 -07:00
parent d5063e5dc8
commit dbde2dc9e4
5 changed files with 162 additions and 29 deletions

Binary file not shown.

View File

@ -1818,6 +1818,66 @@ table .span24 {
.icon-resize-horizontal {
background-position: -456px -118px;
}
.icon-hdd {
background-position: 0 -144px;
}
.icon-bullhorn {
background-position: -24px -144px;
}
.icon-bell {
background-position: -48px -144px;
}
.icon-certificate {
background-position: -72px -144px;
}
.icon-thumbs-up {
background-position: -96px -144px;
}
.icon-thumbs-down {
background-position: -120px -144px;
}
.icon-hand-right {
background-position: -144px -144px;
}
.icon-hand-left {
background-position: -168px -144px;
}
.icon-hand-up {
background-position: -192px -144px;
}
.icon-hand-down {
background-position: -216px -144px;
}
.icon-circle-arrow-right {
background-position: -240px -144px;
}
.icon-circle-arrow-left {
background-position: -264px -144px;
}
.icon-circle-arrow-up {
background-position: -288px -144px;
}
.icon-circle-arrow-down {
background-position: -312px -144px;
}
.icon-globe {
background-position: -336px -144px;
}
.icon-wrench {
background-position: -360px -144px;
}
.icon-tasks {
background-position: -384px -144px;
}
.icon-filter {
background-position: -408px -144px;
}
.icon-briefcase {
background-position: -432px -144px;
}
.icon-fullscreen {
background-position: -456px -144px;
}
.dropup,
.dropdown {
position: relative;

View File

@ -1445,15 +1445,15 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-refresh"></i> icon-refresh</li>
<li><i class="icon-list-alt"></i> icon-list-alt</li>
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
@ -1479,10 +1479,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
<li><i class="icon-picture"></i> icon-picture</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-pencil"></i> icon-pencil</li>
<li><i class="icon-map-marker"></i> icon-map-marker</li>
<li><i class="icon-adjust"></i> icon-adjust</li>
@ -1493,6 +1489,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
@ -1513,10 +1513,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
@ -1532,6 +1528,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
@ -1547,6 +1547,26 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-folder-open"></i> icon-folder-open</li>
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
<li><i class="icon-hdd"></i> icon-hdd</li>
<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
<li><i class="icon-bell"></i> icon-bell</li>
<li><i class="icon-certificate"></i> icon-certificate</li>
<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
<li><i class="icon-hand-right"></i> icon-hand-right</li>
<li><i class="icon-hand-left"></i> icon-hand-left</li>
<li><i class="icon-hand-up"></i> icon-hand-up</li>
<li><i class="icon-hand-down"></i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
<li><i class="icon-globe"></i> icon-globe</li>
<li><i class="icon-wrench"></i> icon-wrench</li>
<li><i class="icon-tasks"></i> icon-tasks</li>
<li><i class="icon-filter"></i> icon-filter</li>
<li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-fullscreen"></i> icon-fullscreen</li>
</ul>
</div>
</div>

View File

@ -1368,15 +1368,15 @@
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-refresh"></i> icon-refresh</li>
<li><i class="icon-list-alt"></i> icon-list-alt</li>
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
@ -1402,10 +1402,6 @@
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
<li><i class="icon-picture"></i> icon-picture</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-pencil"></i> icon-pencil</li>
<li><i class="icon-map-marker"></i> icon-map-marker</li>
<li><i class="icon-adjust"></i> icon-adjust</li>
@ -1416,6 +1412,10 @@
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
@ -1436,10 +1436,6 @@
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
@ -1455,6 +1451,10 @@
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
@ -1470,6 +1470,26 @@
<li><i class="icon-folder-open"></i> icon-folder-open</li>
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
<li><i class="icon-hdd"></i> icon-hdd</li>
<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
<li><i class="icon-bell"></i> icon-bell</li>
<li><i class="icon-certificate"></i> icon-certificate</li>
<li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
<li><i class="icon-hand-right"></i> icon-hand-right</li>
<li><i class="icon-hand-left"></i> icon-hand-left</li>
<li><i class="icon-hand-up"></i> icon-hand-up</li>
<li><i class="icon-hand-down"></i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
<li><i class="icon-globe"></i> icon-globe</li>
<li><i class="icon-wrench"></i> icon-wrench</li>
<li><i class="icon-tasks"></i> icon-tasks</li>
<li><i class="icon-filter"></i> icon-filter</li>
<li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-fullscreen"></i> icon-fullscreen</li>
</ul>
</div>
</div>

View File

@ -6,8 +6,8 @@
// ICONS
// -----
// 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,
// 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="icon-inbox"></i>.
@ -149,10 +149,43 @@
.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-chevron-down { background-position: -313px -119px; } // 1px, 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; }
.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
.icon-hdd { background-position: 0 -144px; }
.icon-bullhorn { background-position: -24px -144px; }
.icon-bell { background-position: -48px -144px; }
.icon-certificate { background-position: -72px -144px; }
.icon-thumbs-up { background-position: -96px -144px; }
.icon-thumbs-down { background-position: -120px -144px; }
.icon-hand-right { background-position: -144px -144px; }
.icon-hand-left { background-position: -168px -144px; }
.icon-hand-up { background-position: -192px -144px; }
.icon-hand-down { background-position: -216px -144px; }
.icon-circle-arrow-right { background-position: -240px -144px; }
.icon-circle-arrow-left { background-position: -264px -144px; }
.icon-circle-arrow-up { background-position: -288px -144px; }
.icon-circle-arrow-down { background-position: -312px -144px; }
.icon-globe { background-position: -336px -144px; }
.icon-wrench { background-position: -360px -144px; }
.icon-tasks { background-position: -384px -144px; }
.icon-filter { background-position: -408px -144px; }
.icon-briefcase { background-position: -432px -144px; }
.icon-fullscreen { background-position: -456px -144px; }