From: Mark Otto Date: Fri, 28 Jun 2013 01:49:05 +0000 (-0700) Subject: Merge branch '3.0.0-wip' into bs3_remove_icons X-Git-Tag: v3.0.0-rc1~218^2~4 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=62f76ad33f5a70c21f91e729963e049547ffc391;p=thirdparty%2Fbootstrap.git Merge branch '3.0.0-wip' into bs3_remove_icons Conflicts: docs/components.html --- 62f76ad33f5a70c21f91e729963e049547ffc391 diff --cc docs/components.html index e2a8837051,7768fccf37..ee819a244e --- a/docs/components.html +++ b/docs/components.html @@@ -6,7 -6,321 +6,6 @@@ lead: "Dozens of reusable components bu --- - -
-
-

Icons font by Glyphicons

-
- -

Included glyphs

-

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

- - - -

Glyphicons attribution

-

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

- - -

How to use

-

Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

-{% highlight html %} - -{% endhighlight %} -

Want to change the icon color? Just change the color of the parent element.

-

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

- - -

Icon examples

-

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

- -

Buttons

- -
Button group in a button toolbar
-
-
-
- - - - -
-
-
-{% highlight html %} -
-
- - - - -
-
-{% endhighlight %} - -
-

Accessibility

-

Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.

-
- -
Dropdown in a button group
-
-
- User - - -
-
-{% highlight html %} -
- User - - -
-{% endhighlight %} - -
Large button
-
- Star -
-{% highlight html %} - Star -{% endhighlight %} - -
Small button
-
- -
-{% highlight html %} - -{% endhighlight %} - - -

Navigation

-
- -
-{% highlight html %} - -{% endhighlight %} - -

Form fields

-
-
- -
-
- - -
-
-
-
-{% highlight html %} -
- -
-
- - -
-
-
-{% endhighlight %} - -
- - --