changing alerts to alert-success, matching color

src/_includes/examples/animated-spinner.html

@@ -2,8 +2,15 @@
   <h2 class="page-header">Animated Spinner</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>,
-      <code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>.
+      <p>
+        Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>,
+        <code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>.
+      </p>
+      <p>
+        <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></button>
+        <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i></button>
+        <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-cog fa-icon-spin"></i></button>
+      </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
@@ -12,7 +19,7 @@
 {% highlight html %}
 <i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content...
 {% endhighlight %}
-      <p class="alert alert-info">
+      <p class="alert alert-success">
         <i class="fa-icon fa-icon-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.
       </p>
     </div>

src/_includes/examples/button-dropdowns.html

@@ -3,8 +3,8 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <div class="btn-group open">
-        <a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
-        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+        <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
+        <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
           <span class="fa-icon fa-icon-caret-down"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@@ -18,8 +18,8 @@
     <div class="col-md-9 col-sm-8">
 {% highlight html %}
 <div class="btn-group open">
-  <a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
-  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+  <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
+  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="fa-icon fa-icon-caret-down"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
@@ -30,7 +30,7 @@
   </ul>
 </div>
 {% endhighlight %}
-      <div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
+      <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
     </div>
   </div>
 </section>

src/_includes/examples/inline-icons.html

@@ -13,7 +13,7 @@
 {% highlight html %}
 <i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
 {% endhighlight %}
-      <div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div>
+      <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div>
     </div>
   </div>
 </section>

src/_includes/examples/larger-icons.html

@@ -26,7 +26,7 @@
 <p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p>
 <p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
 {% endhighlight %}
-      <div class="alert alert-info">
+      <div class="alert alert-success">
         <i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have
         sufficient line-height.
       </div>

src/_includes/examples/list-bullets.html

@@ -23,7 +23,7 @@
   <li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li>
 </ul>
 {% endhighlight %}
-      <div class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
+      <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
     </div>
   </div>
 </section>

src/_includes/examples/rotated-flipped.html

@@ -21,7 +21,7 @@
 <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
 <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical
 {% endhighlight %}
-      <p class="alert alert-info">
+      <p class="alert alert-success">
         <i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
       </p>
     </div>

src/_includes/icons/brand.html

@@ -1,7 +1,7 @@
 <section id="brand">
   <h2 class="page-header">Brand Icons</h2>
 
-  <div class="alert alert-info">
+  <div class="alert alert-success">
     {% include brand-license.html %}
   </div>
 

src/_includes/new-naming.html

@@ -1,6 +1,6 @@
 <section id="new-naming">
   <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
-  <p class="lead text-center alert alert-info">fa-icon-[name]-[shape]-[alt]-[direction]</p>
+  <p class="lead text-center alert alert-success">fa-icon-[name]-[shape]-[alt]-[direction]</p>
   <p>
     A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
     of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict

src/assets/less/site/bootstrap/variables.less

@@ -57,7 +57,7 @@
 
 // Brand colors
 //@brand-primary:         @blue-dark;
-@brand-success:         lighten(@fa-green, 5%);
+@brand-success:         mix(@fa-green, #fff, 70%);
 //@brand-warning:         @yellow-dark;
 //@brand-danger:          @red;
 //@brand-info:            @blue;
@@ -112,9 +112,9 @@
 //@state-danger-bg:                @red-lighter;
 //@state-danger-border:            darken(spin(@state-danger-bg, -10), 4%);
 //
-//@state-success-text:             mix(@green-darker, @green-dark, 30%);
-//@state-success-bg:               @green-lighter;
-//@state-success-border:           darken(spin(@state-success-bg, -10), 13%);
+@state-success-text:             @fa-green;
+@state-success-bg:               mix(@fa-green, #fff, 6%);
+@state-success-border:           darken(spin(@state-success-bg, -10), 13%);
 
 @state-info-text:                mix(@blue-dark, @blue, 50%);
 @state-info-bg:                  @blue-lighter;

src/get-started.html

@@ -93,7 +93,7 @@ $ gem install font-awesome-sass
 {% highlight scss %}
 @fa-font-path:   "../font";
 {% endhighlight %}
-        <p class="alert alert-info"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
+        <p class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
       </li>
       <li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li>
       <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

src/license.html

@@ -20,7 +20,7 @@ relative_path: ../
   {% include stripe-ad.html %}
 
   <section>
-    <div class="alert alert-info">
+    <div class="alert alert-success">
       <ul class="fa-icon-ul margin-bottom-none">
         <li>
           <i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: