diff --git a/docs/base-css.html b/docs/base-css.html index efc7e18e2e..0c6579b1e7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1488,51 +1488,90 @@

Icons are great, but where would one use them? Here are a few ideas:

-

Essentially, anywhere you can put an <i> tag, you can put an icon.

+

Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:

+
+<i class="icon"></i>
+

Examples

-
-

Use them in buttons, or in button groups for a toolbar style presentation.

-

- Refresh - Checkout - Delete -

+
+

Use them in buttons - of all types and sizes.

-
- - - -
+
+ User + + +

- Refresh + Refresh + Checkout + Delete +

+

+ Comment Settings + More Info

-
-

Or, use them in navigation.

+
+

Use them in navigation.

+
+
+

Use them with prepended forms.

+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 2108ddd054..5b9cae472a 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1423,50 +1423,89 @@

{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}

-

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

+

{{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:{{/i}}

+
+<i class="icon"></i>
+

{{_i}}Examples{{/i}}

-
-

{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}

-

- {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} -

+
+

{{_i}}Use them in buttons - of all types and sizes.{{/i}}

-
- - - -
+
+ {{_i}}User{{/i}} + + +

- {{_i}}Refresh{{/i}} + {{_i}}Refresh{{/i}} + {{_i}}Checkout{{/i}} + {{_i}}Delete{{/i}} +

+

+ {{_i}}Comment{{/i}} {{_i}}Settings{{/i}} + {{_i}}More Info{{/i}}

-
-

{{_i}}Or, use them in navigation.{{/i}}

+
+

{{_i}}Use them in navigation.{{/i}}

+
+
+

{{_i}}Use them with prepended forms.{{_i}}

+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+