diff --git a/bootstrap.css b/bootstrap.css index 616e90bb11..ffdf19f2e4 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Wed Jan 25 08:34:06 PST 2012 + * Date: Wed Jan 25 09:50:58 PST 2012 */ article, aside, @@ -1088,7 +1088,7 @@ table .headerSortUp:after { -moz-opacity: 0.6; opacity: 0.6; } -i { +.icon { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; background-repeat: no-repeat; diff --git a/bootstrap.min.css b/bootstrap.min.css index 57d76d9452..9be1c65d47 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -208,7 +208,7 @@ table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0 table .header:hover:after{visibility:visible;} table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} -i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} +.icon{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} .glass{background-position:0 0;} .music{background-position:-24px 0;} .search{background-position:-48px 0;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 12c534fb2d..0fe480ecb3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -596,9 +596,14 @@ form.well { /* Icons ------------------------- */ +.the-icons { + margin-bottom: 18px; +} .the-icons i { display: block; margin-bottom: 5px; +} +.the-icons i:hover { background-color: rgba(255,0,0,.25); } .the-icons i:after { @@ -606,9 +611,8 @@ form.well { content: attr(class); font-style: normal; margin-left: 20px; - width: 100px; + width: 140px; } - #javascript input[type=checkbox] { position: relative; top: -1px; diff --git a/docs/base-css.html b/docs/base-css.html index 75c7efe5e6..6b6bd5c51a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1284,119 +1284,119 @@

Icons Graciously provided by Glyphicons

-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
-
-
- - - - - - - - - - -
-
-
-

Light red background color is only used to show the dimensions of the icons in the docs.

-
+
+
+ Heads up! On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons.

@@ -1409,11 +1409,11 @@

How to use

-

With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:

+

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 class="chevron-left"></i>
+<i class="icon search"></i>
-

There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.

+

There are over 100 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.

Use cases

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 6308522595..32df36b0f0 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1221,119 +1221,119 @@

{{_i}}Icons Graciously provided by Glyphicons{{/i}}

-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
-
-
- - - - - - - - - - -
-
-
-

{{_i}}Light red background color is only used to show the dimensions of the icons in the docs.{{/i}}

-
+
+
+ {{_i}}Heads up! On hover we show a light red background color to highlight the size of the icon. This won't appear in normal usage of icons.{{/i}}

@@ -1346,11 +1346,11 @@

{{_i}}How to use{{/i}}

-

{{_i}}With v2.0.0, the <i> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:{{/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 class="chevron-left"></i>
+<i class="icon search"></i>
-

{{_i}}There are over 100 classes to choose from for your icons. Just add an <i> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}

+

{{_i}}There are over 100 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}}

{{_i}}Use cases{{/i}}

diff --git a/lib/sprites.less b/lib/sprites.less index 4a49bb8b44..0d51125c26 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -11,7 +11,7 @@ // class to add width, height, and background-position. Your resulting HTML // will look like . -i { +.icon { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; background-repeat: no-repeat;