diff options
| author | Burak Tuyan <[email protected]> | 2012-01-27 16:33:18 +0200 |
|---|---|---|
| committer | Burak Tuyan <[email protected]> | 2012-01-27 16:33:18 +0200 |
| commit | 942d1b459568acb9f66525f8f6316a252a199e02 (patch) | |
| tree | b73199e7dcd90b513e2714d8500dc21c8618bb30 /docs | |
| parent | 11d7ef1515a09559b287089782abf85827e667c4 (diff) | |
| download | bootstrap-942d1b459568acb9f66525f8f6316a252a199e02.tar.xz bootstrap-942d1b459568acb9f66525f8f6316a252a199e02.zip | |
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)
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 108 | ||||
| -rw-r--r-- | docs/assets/img/glyphicons-halflings-sprite-white.png | bin | 13566 -> 0 bytes | |||
| -rw-r--r-- | docs/assets/img/glyphicons-halflings-sprite.png | bin | 14152 -> 0 bytes | |||
| -rw-r--r-- | docs/assets/img/glyphicons-halflings-white.png | bin | 0 -> 4352 bytes | |||
| -rw-r--r-- | docs/assets/img/glyphicons-halflings.png | bin | 0 -> 4364 bytes | |||
| -rw-r--r-- | docs/base-css.html | 62 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 62 |
7 files changed, 191 insertions, 41 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 68e161051..c878d70ff 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; } diff --git a/docs/assets/img/glyphicons-halflings-sprite-white.png b/docs/assets/img/glyphicons-halflings-sprite-white.png Binary files differdeleted file mode 100644 index a92b1913a..000000000 --- a/docs/assets/img/glyphicons-halflings-sprite-white.png +++ /dev/null diff --git a/docs/assets/img/glyphicons-halflings-sprite.png b/docs/assets/img/glyphicons-halflings-sprite.png Binary files differdeleted file mode 100644 index b4e0acfbc..000000000 --- a/docs/assets/img/glyphicons-halflings-sprite.png +++ /dev/null diff --git a/docs/assets/img/glyphicons-halflings-white.png b/docs/assets/img/glyphicons-halflings-white.png Binary files differnew file mode 100644 index 000000000..a20760bfd --- /dev/null +++ b/docs/assets/img/glyphicons-halflings-white.png diff --git a/docs/assets/img/glyphicons-halflings.png b/docs/assets/img/glyphicons-halflings.png Binary files differnew file mode 100644 index 000000000..151407a29 --- /dev/null +++ b/docs/assets/img/glyphicons-halflings.png diff --git a/docs/base-css.html b/docs/base-css.html index 9cad9de01..da5268069 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -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"> <i class="icon search"></i> </pre> - <p>There are over 100 classes to choose from for your icons. Just add an <code><i></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><i></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"> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c3d10eb08..6476669e6 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -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"> <i class="icon search"></i> </pre> - <p>{{_i}}There are over 100 classes to choose from for your icons. Just add an <code><i></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><i></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"> |
