From 4a907709ba38767b118c1a880dadfb58df8ae1d6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 23:26:46 -0700 Subject: redo icons section --- docs/templates/pages/base-css.mustache | 98 +++++++++++++++------------------- 1 file changed, 43 insertions(+), 55 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 48043cbc8..a1f4a3501 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1272,6 +1272,9 @@

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

+ +

{{_i}}Icon glyphs{{/i}}

+

{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

    @@ -1435,16 +1438,12 @@
-
+
-

{{_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}}All icons classes are prefixed with .icon- 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}}Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}

+

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

+

{{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

 <i class="icon-search"></i>
@@ -1452,66 +1451,55 @@ 
 <i class="icon-search icon-white"></i>
-

{{_i}}There are 140 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}}Heads up!{{/i}} {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}}

-

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

-

{{_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}}Examples{{/i}}

+

{{_i}}Icon examples{{/i}}

{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

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

{{_i}}Buttons{{/i}}

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

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

-

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

+
{{! /bs-docs-example }} -
- -
+

{{_i}}Navigation{{/i}}

+
+
+ +
{{! /well }} +
{{! /bs-docs-example }} -
+

{{_i}}Form fields{{/i}}

+
-- cgit v1.2.3