Add more icons

1 files changed, 65 insertions, 16 deletions

diff --git a/docs/elements.html b/docs/elements.html
index ed56767..c7f782e 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -8,6 +8,7 @@
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Elements - Spectre.css</title>
   <link rel="stylesheet" href="css/spectre.css" />
+  <link rel="stylesheet" href="css/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
@@ -410,9 +411,9 @@
               <button class="btn btn-primary btn-sm">small</button>
             </div>
             <div class="column col-3 col-xs-12">
-              <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-arrow-left"></i></button>
-              <button class="btn btn-action btn-primary"><i class="icon icon-arrow-left"></i></button>
-              <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-arrow-left"></i></button>
+              <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
+              <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
+              <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
             </div>
             <div class="column col-3 col-xs-12">
               <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
@@ -1011,35 +1012,83 @@
         </section>
 
         <section id="icons" class="container">
-          <header class="text-center"><h3>Icons</h3></header>
+          <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
           <section class="notes">
             <p><strong>Icons</strong> are pure CSS icons.</p>
           </section>
           <div class="columns">
             <div class="column col-3 col-md-6">
-              <div class="example-tile-icon">
-                <i class="icon icon-arrow-up centered"></i>
-              </div>
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-arrow-up"></i>
+              </button>
               <p>icon-arrow-up</p>
             </div>
             <div class="column col-3 col-md-6">
-              <div class="example-tile-icon">
-                <i class="icon icon-arrow-right centered"></i>
-              </div>
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-arrow-right"></i>
+              </button>
               <p>icon-arrow-right</p>
             </div>
             <div class="column col-3 col-md-6">
-              <div class="example-tile-icon">
-                <i class="icon icon-arrow-down centered"></i>
-              </div>
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-arrow-down"></i>
+              </button>
               <p>icon-arrow-down</p>
             </div>
             <div class="column col-3 col-md-6">
-              <div class="example-tile-icon">
-                <i class="icon icon-arrow-left centered"></i>
-              </div>
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-arrow-left"></i>
+              </button>
               <p>icon-arrow-left</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-menu"></i>
+              </button>
+              <p>icon-menu</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-caret"></i>
+              </button>
+              <p>icon-caret</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-more-horiz"></i>
+              </button>
+              <p>icon-more-horiz</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-more-vert"></i>
+              </button>
+              <p>icon-more-vert</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-plus"></i>
+              </button>
+              <p>icon-plus</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-minus"></i>
+              </button>
+              <p>icon-minus</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-cross"></i>
+              </button>
+              <p>icon-cross</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-check"></i>
+              </button>
+              <p>icon-check</p>
+            </div>
           </div>
 
         </section>