diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index e5a745be6f..a9b2dba5a5 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 60e54ce9d8..2ffef9edf2 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1112,380 +1112,380 @@ table .span12 {
width: 924px;
margin-left: 0;
}
-.icon {
+.i {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
- display: inline-block;
- vertical-align: text-top;
- width: 14px;
- height: 14px;
*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 {
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a5ad9631ad..7b6e4ef3a4 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -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;
diff --git a/docs/base-css.html b/docs/base-css.html
index 0f97a036ac..c71874b3a2 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1303,142 +1303,142 @@ For example, <code>section</code> should be wrapped as inline.
-
-
-
-
@@ -1452,17 +1452,18 @@ For example, <code>section</code> should be wrapped as inline.
Built as a sprite
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
-
Glyphicons 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.
+
All icons classes are prefixed with .i- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
+
Glyphicons 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.
How to use
-
With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .icon. To use, place the following code just about anywhere:
+
With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:
-<i class="icon search"></i>
+<i class="i i-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
-<i class="icon white search"></i>
+<i class="i i-search i-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
@@ -1485,41 +1486,41 @@ For example, <code>section</code> should be wrapped as inline.
@@ -1529,7 +1530,7 @@ For example, <code>section</code> should be wrapped as inline.
Email address
diff --git a/docs/components.html b/docs/components.html
index 02b50211e7..26fa9b7f57 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -548,13 +548,13 @@
@@ -562,7 +562,7 @@
...
<li>
<a href="#">
- <i class="icon book"></i>
+ <i class="i i-book"></i>
Library
</a>
</li>
diff --git a/docs/javascript.html b/docs/javascript.html
index 9781f3bc07..0c064a6ac7 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -412,7 +412,7 @@ $('#myModal').on('hidden', function () {
-
+
Regular link
Dropdown
@@ -592,7 +592,7 @@ $('#myModal').on('hidden', function () {
Example tabs
Click the tabs below to toggle between hidden panes, even via dropdown menus.
-
+
Home Profile
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 2da59f0ef9..31607eef91 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1227,142 +1227,142 @@
-
-
-
-
@@ -1376,17 +1376,18 @@
{{_i}}Built as a sprite{{/i}}
{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}
-
{{_i}}Glyphicons 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}}
+
{{_i}}All icons classes are prefixed with .i- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}
+
{{_i}}Glyphicons 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}}
{{_i}}How to use{{/i}}
-
{{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .icon. To use, place the following code just about anywhere:{{/i}}
+
{{_i}}With v2.0.0, we have opted to use an <i> tag for all our icons with a base class of .i. To use, place the following code just about anywhere:{{/i}}
-<i class="icon search"></i>
+<i class="i i-search"></i>
{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}
-<i class="icon white search"></i>
+<i class="i i-search i-white"></i>
{{_i}}There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}
@@ -1409,41 +1410,41 @@
@@ -1453,7 +1454,7 @@
{{_i}}Email address{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index c9f740b4a4..2386f6a9e9 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -472,13 +472,13 @@
@@ -486,7 +486,7 @@
...
<li>
<a href="#">
- <i class="icon book"></i>
+ <i class="i i-book"></i>
{{_i}}Library{{/i}}
</a>
</li>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 716a2b3fa8..8841b1f7b5 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
-
+
{{_i}}Regular link{{/i}}
{{_i}}Dropdown{{/i}}
@@ -516,7 +516,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Example tabs{{/i}}
{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}
-
+
{{_i}}Home{{/i}} {{_i}}Profile{{/i}}
diff --git a/less/sprites.less b/less/sprites.less
index a40d4dea47..c5c8fd725a 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -6,150 +6,151 @@
// ICONS
// -----
-// As of v2.0.0, the tag is reserved for icons from the Glyphicons set.
-// All icons receive the styles of the 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:
-// 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
+//