From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- docs/base-css.html | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2bc6f49fb..c07263495 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1175,6 +1175,158 @@ Form states + + +
+
+

Icons Graciously provided by Glyphicons

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

Built as a sprite

+

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.

+

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.

+
+
+

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:

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

+
+
+

Use cases

+

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

+
    +
  • As visuals for your sidebar navigation
    • +
  • For a purely icon-driven nav
    • +
  • For buttons to help convey the meaning of an action
    • +
  • With links to share context on a user's destination
    • +
+

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

+
+
+
+ + +