Elements - Spectre.css

@@ -49,6 +48,9 @@

Forms

+ Icons +

Labels

@@ -408,14 +410,14 @@

- - - + + +

@@ -429,15 +431,18 @@ <button class="btn btn-block">block button</button> -<button class="btn btn-action"><i class="icon icon-markunread"></i></button> -<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button> +<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button> +<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>

- - - + + + + + +

@@ -445,9 +450,9 @@

<button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
 
 
           Button groups
@@ -1005,6 +1010,40 @@


 
+        
+          Icons
+          
+            Icons are pure CSS icons.
+          
+          
+            
+              
+                
+              
+              icon-arrow-up
+            
+            
+              
+                
+              
+              icon-arrow-right
+            
+            
+              
+                
+              
+              icon-arrow-down
+            
+            
+              
+                
+              
+              icon-arrow-left
+            
+          
+
+        
+
         
           Labels
           
@@ -1034,8 +1073,7 @@
           Codes
           
             Codes are inline and multiline code snippets.
-            For inline code, you can use the element <code>. 
-            For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.
+            For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.
           
 
 
@@ -1055,7 +1093,7 @@
             Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
           
           
-            
+            
               
             
           
@@ -1067,7 +1105,7 @@
             You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.  
           
           
-            
+            
               
                 
                 macOS Yosemite wallpaper
@@ -1085,7 +1123,7 @@
             For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.