changing examples to be CDN auto-a11y based with note

src/_includes/examples/animated.html

@@ -31,19 +31,19 @@
         with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
       </p>
 {% highlight html %}
-<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
+<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
 <span class="sr-only">Loading...</span>
 
-<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
+<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
 <span class="sr-only">Loading...</span>
 
-<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
+<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
 <span class="sr-only">Loading...</span>
 
-<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
+<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
 <span class="sr-only">Loading...</span>
 
-<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 <span class="sr-only">Loading...</span>
 {% endhighlight %}
       <p class="alert alert-success">

src/_includes/examples/basic.html

@@ -10,7 +10,7 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        <i class="fa fa-camera-retro" aria-hidden="true"></i>
+        <i class="fa fa-camera-retro"></i>
         <span class="sr-only">Example: basic icon</span>
         fa-camera-retro
       </p>
@@ -22,7 +22,7 @@
         brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
       </p>
 {% highlight html %}
-<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro
+<i class="fa fa-camera-retro"></i> fa-camera-retro
 {% endhighlight %}
       <div class="alert alert-success">
         <ul class="fa-ul">

src/_includes/examples/bootstrap.html

@@ -4,13 +4,13 @@
     <div class="col-md-3 col-sm-4">
       <p>
         <a class="btn btn-danger" href="#">
-          <i class="fa fa-trash-o fa-lg"  aria-hidden="true"></i> Delete</a>
+          <i class="fa fa-trash-o fa-lg"></i> Delete</a>
         <a class="btn btn-default btn-sm" href="#">
-          <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
+          <i class="fa fa-cog"></i> Settings</a>
       </p>
       <p>
         <a class="btn btn-lg btn-success" href="#">
-          <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+          <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
       </p>
       <div class="margin-bottom">
         <div class="btn-group">
@@ -30,26 +30,26 @@
       </div>
       <div class="margin-bottom">
         <div class="input-group margin-bottom-sm">
-          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
           <input class="form-control" type="text" placeholder="Email address">
         </div>
         <div class="input-group">
-          <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+          <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
           <input class="form-control" type="password" placeholder="Password">
         </div>
       </div>
       <div class="margin-bottom">
         <div class="btn-group open">
-          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i> User</a>
+          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
             <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
           </a>
           <ul class="dropdown-menu">
-            <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
-            <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
-            <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
+            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
+            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
+            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
             <li class="divider"></li>
-            <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
+            <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
           </ul>
         </div>
       </div>
@@ -61,12 +61,12 @@
       </p>
 {% highlight html %}
 <a class="btn btn-danger" href="#">
-  <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
+  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
 <a class="btn btn-default btn-sm" href="#">
-  <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
+  <i class="fa fa-cog"></i> Settings</a>
 
 <a class="btn btn-lg btn-success" href="#">
-  <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
 
 <div class="btn-group">
   <a class="btn btn-default" href="#">
@@ -98,11 +98,11 @@
     <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
   </a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
-    <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
-    <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
+    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
     <li class="divider"></li>
-    <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
+    <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
   </ul>
 </div>
 {% endhighlight %}

src/_includes/examples/list.html

@@ -9,20 +9,20 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <ul class="fa-ul">
-        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
-        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
-        <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
-        <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
+        <li><i class="fa-li fa fa-check-square"></i>List icons</li>
+        <li><i class="fa-li fa fa-check-square"></i>can be used</li>
+        <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
+        <li><i class="fa-li fa fa-square"></i>in lists</li>
       </ul>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
 {% highlight html %}
 <ul class="fa-ul">
-  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
-  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
-  <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
-  <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
+  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
+  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
+  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
+  <li><i class="fa-li fa fa-square"></i>in lists</li>
 </ul>
 {% endhighlight %}
     </div>

src/examples.html

@@ -20,15 +20,24 @@ relative_path: ../
   {% endcapture %}
   {% include stripe-ad.html %}
 
+  <div class="alert alert-success gg">
+    <div class="gg-col min-width">
+      <i class="fa fa-universal-access fa-2x" aria-hidden"true"></i>
+    </div>
+    <div class="gg-col padding-left">
+      <p class="margin-bottom-none">The following examples are kept simple and assume use of <a href="{{ page.relative_path }}get-started/get-started-cdn">Font Awesome CDN</a>, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the <a href="{{ page.relative_path }}examples/#accessible">manual accessibility examples</a> and read more about <a href="{{ page.relative_path }}accessibility">making your icons more awesome for all users</a></p>
+    </div>
+  </div>
+
   {% include examples/basic.html %}
   {% include examples/larger.html %}
   {% include examples/fixed-width.html %}
   {% include examples/list.html %}
   {% include examples/bordered-pulled.html %}
   {% include examples/animated.html %}
-  {% include examples/accessible.html %}
   {% include examples/rotated-flipped.html %}
   {% include examples/stacked.html %}
   {% include examples/bootstrap.html %}
   {% include examples/custom.html %}
+  {% include examples/accessible.html %}
 </div>