Update Icons example

4 files changed, 42 insertions, 31 deletions

diff --git a/docs/components.html b/docs/components.html
index f322baf..4b6a3e9 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1127,7 +1127,7 @@
             <div class="column col-12">
               <div class="empty">
                 <div class="empty-icon">
-                  <i class="icon icon-2x icon-message"></i>
+                  <i class="icon icon-3x icon-mail"></i>
                 </div>
                 <p class="empty-title h5">You have no new messages</p>
                 <p class="empty-subtitle">Click the button to start a conversation</p>
@@ -1139,7 +1139,7 @@
             <div class="column col-12">
               <div class="empty">
                 <div class="empty-icon">
-                  <i class="icon icon-2x icon-mail"></i>
+                  <i class="icon icon-3x icon-mail"></i>
                 </div>
                 <p class="empty-title h5">You've successfully signed up</p>
                 <p class="empty-subtitle">Click the button to invite your friends</p>
@@ -1154,7 +1154,7 @@
             <div class="column col-12">
               <div class="empty">
                 <div class="empty-icon">
-                  <i class="icon icon-2x icon-people"></i>
+                  <i class="icon icon-3x icon-people"></i>
                 </div>
                 <p class="empty-title h5">You are not following anyone</p>
                 <p class="empty-subtitle">Start to meet new friends</p>
diff --git a/docs/css/docs.css b/docs/css/docs.css
index ee00b12..53425ff 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -191,18 +191,6 @@
   opacity: .75;
 }
 
-.s-content .panel {
-  height: 75vh;
-}
-
-.s-content .panel .tile {
-  margin: .75rem 0;
-}
-
-.s-content .parallax {
-  margin: 2rem auto;
-}
-
 .s-content .code {
   color: #667189;
 }
@@ -231,6 +219,18 @@
   user-select: none;
 }
 
+.s-content .panel {
+  height: 75vh;
+}
+
+.s-content .panel .tile {
+  margin: .75rem 0;
+}
+
+.s-content .parallax {
+  margin: 2rem auto;
+}
+
 .s-content .form-autocomplete .menu {
   position: static;
 }
@@ -317,6 +317,11 @@
   color: #727e96;
 }
 
+.btn .feather {
+  height: 1rem;
+  vertical-align: middle;
+}
+
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;
diff --git a/docs/elements.html b/docs/elements.html
index 21a4509..1707c36 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1732,20 +1732,20 @@
 
           <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4>
           <div class="docs-note">
-            <p>You can use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes.</p>
+            <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>
           <div class="columns">
             <div class="column col-3 col-md-6">
               <p><i class="icon icon-2x icon-mail"></i></p>
-              <p>icon-2x</p>
+              <p>icon-2x (32px)</p>
             </div>
             <div class="column col-3 col-md-6">
               <p><i class="icon icon-3x icon-mail"></i></p>
-              <p>icon-3x</p>
+              <p>icon-3x (48px)</p>
             </div>
             <div class="column col-3 col-md-6">
               <p><i class="icon icon-4x icon-mail"></i></p>
-              <p>icon-4x</p>
+              <p>icon-4x (64px)</p>
             </div>
           </div>
 
diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index a49d71e..c8e7f87 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -195,18 +195,6 @@
     }
   }
 
-  .panel {
-    height: 75vh;
-
-    .tile {
-      margin: .75rem 0;
-    }
-  }
-
-  .parallax {
-    margin: 2rem auto;
-  }
-
   .code {
     color: lighten($body-font-color, 10%);
 
@@ -231,6 +219,17 @@
     }
   }
 
+  .panel {
+    height: 75vh;
+
+    .tile {
+      margin: .75rem 0;
+    }
+  }
+
+  .parallax {
+    margin: 2rem auto;
+  }
 
   .form-autocomplete .menu {
     position: static;
@@ -313,6 +312,13 @@
   }
 }
 
+.btn {
+  .feather {
+    height: 1rem;
+    vertical-align: middle;
+  }
+}
+
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;