From b01de5fc56ab031df8a08be9ce720c68ced7a5c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 09:51:03 -0800 Subject: updated icons to require a base class .icon --- docs/assets/css/docs.css | 8 +- docs/base-css.html | 208 ++++++++++++++++----------------- docs/templates/pages/base-css.mustache | 208 ++++++++++++++++----------------- 3 files changed, 214 insertions(+), 210 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 12c534fb2..0fe480ecb 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 75c7efe5e..6b6bd5c51 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 630852259..32df36b0f 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}}

-- cgit v1.2.3