adding doc examples and code

docs/assets/less/font-awesome.less

@@ -23,7 +23,8 @@
     */
 
 @FontAwesomePath:   "../font";
-@borderColor:       #eeeeee;
+@borderColor:       #eee;
+@iconMuted:         #eee;
 .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
 
 @font-face {
@@ -116,6 +117,10 @@ ul.icons {
   }
 }
 
+.icon-muted {
+  color: @iconMuted;
+}
+
 // Icon Borders
 // -------------------------
 
@@ -150,9 +155,13 @@ ul.icons {
   }
 }
 
-// Icon Floats
+// Floats
 // -------------------------
 
+// Quick floats
+.pull-right { float: right; }
+.pull-left { float: left; }
+
 [class^="icon-"],
 [class*=" icon-"] {
   &.pull-left {
@@ -169,10 +178,7 @@ ul.icons {
     &.pull-left, &.pull-right {
       &.icon-2x { margin-top: .35em; }
     }
-    &.icon-spin {
-      height: .75em;
-      &.icon-large { height: .75em; }
-    }
+    &.icon-spin.icon-large { height: .75em; }
   }
 }
 
@@ -182,7 +188,6 @@ ul.icons {
     &.pull-left, &.pull-right {
       &.icon-2x { margin-top: .45em; }
     }
-    &.icon-spin { height: .8em; }
   }
 }
 
@@ -192,7 +197,6 @@ ul.icons {
     &.pull-left, &.pull-right {
       &.icon-2x { margin-top: .2em; }
     }
-    &.icon-spin { height: .68em; }
   }
 }
 

docs/assets/less/site.less

@@ -363,6 +363,9 @@ section {
   background-color: @grayLighter;
 }
 
+.well.well-transparent {
+  background-color: transparent;
+}
 
 footer {
 //  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);

docs/assets/less/variables.less

@@ -41,7 +41,7 @@
 // Links
 // -------------------------
 @linkColor:             lighten(@red, 10%);
-@linkColorHover:        @linkColor;
+@linkColorHover:        @red;
 
 
 // Typography
@@ -102,8 +102,8 @@
 @btnWarningBackground:              lighten(@orange, 15%);
 @btnWarningBackgroundHighlight:     @orange;
 
-@btnDangerBackground:               #ee5f5b;
-@btnDangerBackgroundHighlight:      #bd362f;
+@btnDangerBackground:               lighten(@red, 20%);
+@btnDangerBackgroundHighlight:      lighten(@red, 5%);
 
 @btnInverseBackground:              #444;
 @btnInverseBackgroundHighlight:     @grayDarker;

docs/index.html

@@ -204,12 +204,12 @@
       Every icon re-created from the ground up to be optimized for Bootstrap's default 14px.
     </div>
     <div class="span4">
-      <h4><i class="icon-legal"></i> Better License</h4>
-      SIL open font license, Apache 2.0 for code. No more attribution required, but much appreciated.
+      <h4><i class="icon-th-large"></i> <a target="_blank"  href="http://icnfnt.com/">Font Sub-setting</a></h4>
+      Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank"  href="http://icnfnt.com/">sub-set</a> to get just the icons you need.
     </div>
     <div class="span4">
-      <h4><i class="icon-circle-arrow-down"></i> 25% smaller size</h4>
-      Smaller, even with more icons. More compact file size for faster page loads.
+      <h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4>
+      SIL open font license, MIT license for code. No more attribution required, but much appreciated.
     </div>
   </div>
   <div class="row">
@@ -218,12 +218,12 @@
       Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
     </div>
     <div class="span4">
-      <h4><i class="icon-th-large"></i> <a target="_blank"  href="http://icnfnt.com/">Font Sub-setting</a></h4>
-      Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank"  href="http://icnfnt.com/">sub-set</a> to get just the icons you need.
+      <h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4>
+      <a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
     </div>
     <div class="span4">
-      <h4><i class="icon-spinner icon-spin"></i> New classes</a></h4>
-      New classes for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
+      <h4><i class="icon-resize-small"></i> 25% smaller size</h4>
+      3.0 is smaller, even with 40 new icons. More compact file size means faster page loads.
     </div>
   </div>
 </section>
@@ -796,33 +796,130 @@
     </div>
   </div>
 
+  <h3 class="page-header">New Styles in 3.0</h3>
+  <div class="row">
+    <div class="span4">
+      <i class="icon-quote-left icon-4x pull-left icon-muted"></i>
+      Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
+      Or spinning icons for loading and refreshing content. Or fun big icons in buttons. Lots of new possibilities.
+    </div>
+    <div class="span4">
+      <div class="well well-large well-transparent lead">
+        <i class="icon-spinner icon-spin icon-2x pull-left"></i> Spinner icon when loading content...
+      </div>
+    </div>
+    <div class="span4">
+      <p>
+        <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
+      </p>
+      <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
+    </div>
+  </div>
+
+<h3 class="page-header">Example HTML</h3>
 <div class="row">
   <div class="span3">
     <h4>Inline Icon</h4>
     <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
   </div>
   <div class="span9">
-    <div class="well">
+    <div class="well well-transparent">
       <div style="font-size: 24px; line-height: 1.5em;">
         <i class="icon-camera-retro"></i> icon-camera-retro
       </div>
     </div>
 <pre class="prettyprint linenums">
-&lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
-  &lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
-&lt;/div&gt;
+&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
 </pre>
     <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
-    <p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p>
-    <div class="well">
+  </div>
+</div>
+<div class="row">
+  <div class="span3">
+    <h4>Larger Icons</h4>
+    <p>
+      To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
+      <code>icon-3x</code>, or <code>icon-4x</code>.
+    </p>
+  </div>
+  <div class="span9">
+    <p>
+      Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
+      <code>icon-3x</code>, or <code>icon-4x</code> classes.
+    </p>
+    <div class="well well-transparent">
       <div style="font-size: 24px; line-height: 1.5em;">
-        <i class="icon-camera-retro icon-large"></i> icon-camera-retro
+        <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
+        <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
+        <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
+        <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
       </div>
     </div>
 <pre class="prettyprint linenums">
-&lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
-  &lt;i class="icon-camera-retro icon-large"&gt;&lt;/i&gt; icon-camera-retro
-&lt;/div&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-large&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-2x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-3x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-4x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+</pre>
+    <div class="alert alert-info">
+      <i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
+      sufficient line-height.
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="span3">
+    <h4>Animated Spinner</h4>
+    <p>
+      Use the <code>icon-spin</code> class to get any icon to rotate. Works best with <code>icon-spinner</code> and
+      <code>icon-refresh</code>.
+    </p>
+  </div>
+  <div class="span9">
+    <div class="well well-large well-transparent lead">
+      <i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
+    </div>
+<pre class="prettyprint linenums">
+&lt;i class=&quot;icon-spinner icon-spin&quot;&gt;&lt;/i&gt; Spinner icon when loading content...
+</pre>
+  </div>
+</div>
+<div class="row">
+  <div class="span3">
+
+  </div>
+  <div class="span9">
+
+  </div>
+</div>
+<div class="row">
+  <div class="span3">
+    <h4>Bordered & Pulled Icons</h4>
+    <p>
+      Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
+      article graphics.
+    </p>
+  </div>
+  <div class="span9">
+    <div class="well well-large well-transparent">
+      <i class="icon-quote-left icon-4x pull-left icon-muted"></i>
+      Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
+      Or spinning icons for loading and refreshing content. Or fun big icons in buttons. You can combine all of them
+      in any combination to get lots of new possibilities.
+    </div>
+<pre class="prettyprint linenums">
+&lt;i class=&quot;icon-quote-left icon-4x pull-left icon-muted&quot;&gt;&lt;/i&gt;
+Use a few of the new styles together ... lots of new possibilities.
+</pre>
+    <div class="well well-large well-transparent">
+      <i class="icon-camera-retro icon-4x pull-left icon-border"></i>
+      Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
+      Or spinning icons for loading and refreshing content. Or fun big icons in buttons. You can combine all of them
+      in any combination to get lots of new possibilities.
+    </div>
+<pre class="prettyprint linenums">
+&lt;i class=&quot;icon-flag icon-4x pull-left icon-border&quot;&gt;&lt;/i&gt;
+Use a few of the new styles together ... lots of new possibilities.
 </pre>
   </div>
 </div>
@@ -847,9 +944,19 @@
       <a class="btn btn-small" href="#">
         <i class="icon-cog"></i> Settings</a>
     </p>
+    <p>
+      <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
+    </p>
+    <p>
+      <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
+    </p>
+
   </div>
   <div class="span9">
-    <p>Font Awesome icons work great in buttons.</p>
+    <p>
+      Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
+      <code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>.
+    </p>
 <pre class="prettyprint linenums">
 &lt;a class="btn" href="#"&gt;
   &lt;i class="icon-repeat"&gt;&lt;/i&gt; Reload&lt;/a&gt;
@@ -863,6 +970,10 @@
   &lt;i class="icon-trash icon-large"&gt;&lt;/i&gt; Delete&lt;/a&gt;
 &lt;a class="btn btn-small" href="#"&gt;
   &lt;i class="icon-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
+&lt;a class=&quot;btn btn-large btn-danger&quot; href=&quot;#&quot;&gt;
+  &lt;i class=&quot;icon-flag icon-2x pull-left&quot;&gt;&lt;/i&gt;Font Awesome&lt;br&gt;Version 3.0&lt;/a&gt;
+&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot;&gt;
+  &lt;i class=&quot;icon-refresh icon-spin&quot;&gt;&lt;/i&gt; Synchronizing Content...&lt;/a&gt;
 </pre>
   </div>
 </div>
@@ -893,7 +1004,7 @@
   <div class="span3">
     <h4>Button dropdowns</h4>
     <p>
-    <div class="btn-group">
+    <div class="btn-group open">
       <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
       <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
         <span class="icon-caret-down"></span></a>
@@ -909,7 +1020,7 @@
   </p>
   <div class="span9">
 <pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
+&lt;div class="btn-group open"&gt;
     &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; User&lt;/a&gt;
     &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="icon-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
@@ -1008,7 +1119,7 @@
 <div class="row">
   <div class="span3">
     <h4>Custom CSS</h4>
-    <p>Anything you can do with CSS font effects, you can do with Font Awesome.</p>
+    <p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
   </div>
   <div class="span9">
     <p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>