changing alerts to alert-success, matching color

8 files changed, 21 insertions, 14 deletions

diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/animated-spinner.html
index 9f244b1b7..a40b1f58e 100644
--- a/src/_includes/examples/animated-spinner.html
+++ b/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>
diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html
index 35bff703a..326f17496 100644
--- a/src/_includes/examples/button-dropdowns.html
+++ b/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>
diff --git a/src/_includes/examples/inline-icons.html b/src/_includes/examples/inline-icons.html
index 70b0fab74..d5fc45421 100644
--- a/src/_includes/examples/inline-icons.html
+++ b/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>
diff --git a/src/_includes/examples/larger-icons.html b/src/_includes/examples/larger-icons.html
index bf37e2176..91aadf58b 100644
--- a/src/_includes/examples/larger-icons.html
+++ b/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>
diff --git a/src/_includes/examples/list-bullets.html b/src/_includes/examples/list-bullets.html
index 3c52f620b..c2cfb321b 100644
--- a/src/_includes/examples/list-bullets.html
+++ b/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>
diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html
index b20762eff..f7663f07c 100644
--- a/src/_includes/examples/rotated-flipped.html
+++ b/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>
diff --git a/src/_includes/icons/brand.html b/src/_includes/icons/brand.html
index d64c5d53e..4447e32e9 100644
--- a/src/_includes/icons/brand.html
+++ b/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>
 
diff --git a/src/_includes/new-naming.html b/src/_includes/new-naming.html
index 929831734..4a69ba6f3 100644
--- a/src/_includes/new-naming.html
+++ b/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