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

1 files changed, 133 insertions, 132 deletions

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 <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; }