Skip to content

B
bootstrap
Commit 942d1b45 authored by Burak Tuyan's avatar Burak Tuyan
Browse files
Options

Updating to latest version of Glyphicons Halflings set (v.1.5) along with some... 

Updating to latest version of Glyphicons Halflings set (v.1.5) along with some icon enhancements like:

- Updated the Gylphicons Halflings set to version 1.5 (30 new icons)
- Optimized the sprite PNG files for minimum filesize without any quality loss
- Made some fixes for horizontal alignment at the LESS/CSS level (tags, bold, arrow-up, minus, chevron-down)
- Made some fixes for vertical alignment at the LESS/CSS level (chevron-down, resize-vertical, resize-horizontal)
- Renamed the old "calendar" class as "list-alt" class (because now we've a real calendar icon)
- Changed the "background-position" of the icon class to "14px 14px", so that a wrong class name will not be showing the glass icon and instead will show a blank icon (which is useful for just positioning the text after the icons in some cases)
- Added new icons (classes) to the base-css Docs (to both HTML file and Mustache template)
- Changed one of the button examples to danger style and used a white icon
- Renamed the sprite image files to save a few bytes here and there (from glyphicons-halflings-sprite.png to lyphicons-halflings.png and from glyphicons-halflings-sprite-white.png to glyphicons-halflings-white.png)
parent 11d7ef15
Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 52 deletions
docs/assets/css/bootstrap.css
View file @ 942d1b45
......@@ -1066,8 +1066,8 @@ table .span12 {
margin-left: 0;
}
.icon {
background-image: url(../img/glyphicons-halflings-sprite.png);
background-position: 0 0;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
vertical-align: text-top;
......@@ -1075,10 +1075,10 @@ table .span12 {
height: 14px;
}
.icon.white {
background-image: url(../img/glyphicons-halflings-sprite-white.png);
background-image: url(../img/glyphicons-halflings-white.png);
}
.icon.glass {
background-position: 0 0;
background-position: 0 0;
}
.icon.music {
background-position: -24px 0;
......@@ -1170,7 +1170,7 @@ table .span12 {
.icon.refresh {
background-position: -240px -24px;
}
.icon.calendar {
.icon.list-alt {
background-position: -264px -24px;
}
.icon.lock {
......@@ -1201,7 +1201,7 @@ table .span12 {
background-position: 0 -48px;
}
.icon.tags {
background-position: -24px -48px;
background-position: -25px -48px;
}
.icon.book {
background-position: -48px -48px;
......@@ -1219,7 +1219,7 @@ table .span12 {
background-position: -144px -48px;
}
.icon.bold {
background-position: -168px -48px;
background-position: -167px -48px;
}
.icon.italic {
background-position: -192px -48px;
......@@ -1320,11 +1320,41 @@ table .span12 {
.icon.arrow-left {
background-position: -240px -96px;
}
.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-right {
background-position: -264px -96px;
}
.icon.arrow-up {
background-position: -288px -96px;
background-position: -289px -96px;
}
.icon.arrow-down {
background-position: -312px -96px;
......@@ -1342,11 +1372,71 @@ table .span12 {
background-position: -408px -96px;
}
.icon.minus {
background-position: -432px -96px;
background-position: -433px -96px;
}
.icon.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;
}
.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: -409px -120px;
}
.icon.resize-vertical {
background-position: -432px -119px;
}
.icon.resize-horizontal {
background-position: -456px -118px;
}
.dropdown {
position: relative;
}
......
docs/base-css.html
View file @ 942d1b45
......@@ -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,6 +1429,27 @@
<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>
......@@ -1441,7 +1471,7 @@
<pre class="prettyprint linenums">
&lt;i class="icon search"&gt;&lt;/i&gt;
</pre>
<p>There are over 100 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>
<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>
<div class="span4">
<h3>Use cases</h3>
......@@ -1462,7 +1492,7 @@
<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 danger" href="#"><i class="icon white trash"></i> Delete</a>
</p>
<div class="btn-toolbar">
<div class="btn-group">
......
docs/templates/pages/base-css.mustache
View file @ 942d1b45
......@@ -1273,10 +1273,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>
......@@ -1284,8 +1280,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>
......@@ -1301,10 +1301,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>
......@@ -1319,7 +1315,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>
......@@ -1329,10 +1328,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>
......@@ -1345,6 +1340,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>
......@@ -1355,6 +1364,27 @@
<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>
......@@ -1376,7 +1406,7 @@
<pre class="prettyprint linenums">
&lt;i class="icon search"&gt;&lt;/i&gt;
</pre>
<p>{{_i}}There are over 100 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>
<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>
<div class="span4">
<h3>{{_i}}Use cases{{/i}}</h3>
......@@ -1397,7 +1427,7 @@
<p>{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}</p>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
</p>
<div class="btn-toolbar">
<div class="btn-group">
......
less/sprites.less
View file @ 942d1b45
......@@ -7,13 +7,15 @@
// -----
// 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 and are then given a unique
// class to add width, height, and background-position. Your resulting HTML
// will look like <i class="inbox"></i>.
// 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>
.icon {
background-image: url(../img/glyphicons-halflings-sprite.png);
background-position: 0 0;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
vertical-align: text-top;
......@@ -21,7 +23,7 @@
height: 14px;
}
.icon.white {
background-image: url(../img/glyphicons-halflings-sprite-white.png);
background-image: url(../img/glyphicons-halflings-white.png);
}
.icon.glass { background-position: 0 0; }
......@@ -56,7 +58,7 @@
.icon.play-circle { background-position: -192px -24px; }
.icon.repeat { background-position: -216px -24px; }
.icon.refresh { background-position: -240px -24px; }
.icon.calendar { background-position: -264px -24px; }
.icon.list-alt { background-position: -264px -24px; }
.icon.lock { background-position: -288px -24px; }
.icon.flag { background-position: -312px -24px; }
.icon.headphones { background-position: -336px -24px; }
......@@ -67,13 +69,13 @@
.icon.barcode { background-position: -456px -24px; }
.icon.tag { background-position: 0 -48px; }
.icon.tags { background-position: -24px -48px; }
.icon.tags { background-position: -25px -48px; }
.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: -168px -48px; }
.icon.bold { background-position: -167px -48px; }
.icon.italic { background-position: -192px -48px; }
.icon.text-height { background-position: -216px -48px; }
.icon.text-width { background-position: -240px -48px; }
......@@ -108,14 +110,44 @@
.icon.chevron-left { background-position: -432px -72px; }
.icon.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: -288px -96px; }
.icon.arrow-up { background-position: -289px -96px; }
.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: -432px -96px; }
.icon.minus { background-position: -433px -96px; }
.icon.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; }
.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; }
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