Add tags

docs/documentation/elements/icon.html

@@ -2,8 +2,24 @@
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
+variables:
+- name: $icon-dimensions
+  value: 1.5rem
+- name: $icon-dimensions-small
+  value: 1rem
+- name: $icon-dimensions-medium
+  value: 2rem
+- name: $icon-dimensions-large
+  value: 3rem
+
 ---
 
+{% capture icon_example %}
+<span class="icon">
+  <i class="fa fa-home"></i>
+</span>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
@@ -19,18 +35,11 @@ doc-subtab: icon
       <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
-{% capture icon_example %}
-<span class="icon">
-  <i class="fa fa-home"></i>
-</span>
-{% endcapture %}
     <div class="example">
       {{icon_example}}
     </div>
 
-{% highlight html %}
-{{icon_example}}
-{% endhighlight %}
+    {% highlight html %}{{icon_example}}{% endhighlight %}
 
     <div class="content">
       <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
@@ -80,5 +89,8 @@ doc-subtab: icon
         </tr>
       </tbody>
     </table>
+
+    {% include variables.html %}
+
   </div>
 </section>