Update Docs

1 files changed, 15 insertions, 10 deletions

diff --git a/docs/elements/icons.html b/docs/elements/icons.html
index a0abe99..9cd4ffa 100644
--- a/docs/elements/icons.html
+++ b/docs/elements/icons.html
@@ -31,7 +31,7 @@
       </div>
       <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
         <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-            <h2>SPECTRE</h2></a>
+            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
         </div>
         <div class="docs-nav">
           <div class="accordion-container">
@@ -64,7 +64,7 @@
                   </li>
                   <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                   </li>
-                  <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                   </li>
                   <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                   </li>
@@ -199,8 +199,8 @@
       <div class="off-canvas-content">
         <div class="docs-content" id="content">
           <div class="container" id="icons">
-            <h3 class="s-title">Icons<a class="anchor" href="#icons" aria-hidden="true">#</a></h3>
-            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
+            <h3 class="s-title">Icons.css<a class="anchor" href="#icons" aria-hidden="true">#</a></h3>
+            <p><small class="label label-secondary">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -212,12 +212,17 @@
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
             </div>
+            <div class="docs-demo columns">
+              <div class="column">
+                <div class="toast toast-primary">Spectre.css Icons will be moved to a new <a href="https://github.com/picturepan2/icons.css" target="_blank">GitHub Repo</a>.</div>
+              </div>
+            </div>
             <p>
-              Icons are single-element, responsive and pure CSS icons.
+              Icons.css are single-element, responsive and pure CSS icons.
               You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.
             </p>
             <h4 class="s-subtitle" id="icons-navigation">Navigation icons<a class="anchor" href="#icons-navigation" aria-hidden="true">#</a></h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-md-6">
                 <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-up"></i></button>
                 <p>icon-arrow-up</p>
@@ -272,7 +277,7 @@
               </div>
             </div>
             <h4 class="s-subtitle" id="icons-action">Action icons<a class="anchor" href="#icons-action" aria-hidden="true">#</a></h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-md-6">
                 <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-horiz"></i></button>
                 <p>icon-resize-horiz</p>
@@ -347,7 +352,7 @@
               </div>
             </div>
             <h4 class="s-subtitle" id="icons-object">Object icons<a class="anchor" href="#icons-object" aria-hidden="true">#</a></h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-md-6">
                 <button class="btn btn-primary btn-action btn-lg"><i class="icon icon-mail"></i></button>
                 <p>icon-mail</p>
@@ -387,7 +392,7 @@
             <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes.
               You can set <code>font-size</code> to have different icon sizes.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-md-6">
                 <p><i class="icon icon-2x icon-mail"></i></p>
                 <p>icon-2x (32px)</p>
@@ -408,7 +413,7 @@
             </div>
           </div>
           <div class="docs-footer container grid-lg" id="copyright">
-            <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
             <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
           </div>
         </div>