From 7ce73c848f8297f0c59a68e4bd0a492120f99952 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 8 Apr 2017 10:47:38 +0800
Subject: Add new Icons

---
 docs/elements.html | 77 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 20 deletions(-)

(limited to 'docs/elements.html')

diff --git a/docs/elements.html b/docs/elements.html
index 5fd7568..b6c9bfa 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1016,6 +1016,7 @@
           <section class="notes">
             <p><strong>Icons</strong> 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>
           </section>
+          <header class="text-center"><h4>Navigation</h4></header>
           <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1067,27 +1068,21 @@
             </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-apps"></i>
+                <i class="icon icon-caret"></i>
               </button>
-              <p>icon-apps</p>
+              <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-resize-horiz"></i>
+                <i class="icon icon-menu"></i>
               </button>
-              <p>icon-resize-horiz</p>
+              <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-resize-vert"></i>
+                <i class="icon icon-apps"></i>
               </button>
-              <p>icon-resize-vert</p>
+              <p>icon-apps</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1101,11 +1096,20 @@
               </button>
               <p>icon-more-vert</p>
             </div>
+          </div>
+          <header class="text-center"><h4>Action</h4></header>
+          <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-caret"></i>
+                <i class="icon icon-resize-horiz"></i>
               </button>
-              <p>icon-caret</p>
+              <p>icon-resize-horiz</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-resize-vert"></i>
+              </button>
+              <p>icon-resize-vert</p>
             </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
@@ -1131,6 +1135,18 @@
               </button>
               <p>icon-check</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-stop"></i>
+              </button>
+              <p>icon-stop</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-shutdown"></i>
+              </button>
+              <p>icon-shutdown</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-refresh"></i>
@@ -1161,6 +1177,12 @@
               </button>
               <p>icon-edit</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-delete"></i>
+              </button>
+              <p>icon-delete</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-share"></i>
@@ -1179,12 +1201,9 @@
               </button>
               <p>icon-upload</p>
             </div>
-            <div class="column col-3 col-md-6">
-              <button class="btn btn-primary btn-action btn-lg">
-                <i class="icon icon-time"></i>
-              </button>
-              <p>icon-time</p>
-            </div>
+          </div>
+          <header class="text-center"><h4>Object</h4></header>
+          <div class="columns">
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-mail"></i>
@@ -1197,6 +1216,24 @@
               </button>
               <p>icon-people</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-message"></i>
+              </button>
+              <p>icon-message</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-photo"></i>
+              </button>
+              <p>icon-photo</p>
+            </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-time"></i>
+              </button>
+              <p>icon-time</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-link"></i>
-- 
cgit v1.3.1-26-gb76a