Add icon font for buttons

_layouts/home.html

@@ -26,6 +26,9 @@
     <!-- Web Fonts -->
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italics,300,300italics,200' rel='stylesheet' type='text/css'>
 
+    <!-- Icon Fonts -->
+    <link rel="stylesheet" href="/css/ionicons.min.css">
+
     <!-- Favicon -->
     <link rel="shortcut icon" href="/favicon.png" />
 

css/main.css

@@ -439,6 +439,11 @@ a.no-decoration:hover {
 /*
 /*****************************************************************************/
 
+i.icon {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 div.options-panel {
   position: fixed;
   bottom: 0;

magic/index.html

@@ -16,24 +16,33 @@ title: Tyler Hallada
     magicObj[key] = value;
   }
 
+  function findParentWithId(el, id) {
+    while (el.getAttribute('id') !== id) {
+      el = el.parentElement;
+    }
+    return el;
+  }
+
   function togglePanel(event) {
     var options = document.getElementById("options");
+    var button = findParentWithId(event.target, "hide-show");
     if (options.style.display === "none") {  // hidden
       options.style.display = "block";
-      event.target.innerHTML = "Hide";
+      button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
     } else {  // shown
       options.style.display = "none";
-      event.target.innerHTML = "Show";
+      button.innerHTML = "<i class=\"icon ion-chevron-up\"></i>";
     }
   }
 
   function togglePlay(event) {
+    var button = findParentWithId(event.target, "play-pause");
     if (magicObj.paused) {
       magicObj.paused = false;
-      event.target.innerHTML = "Pause";
+      button.innerHTML = "<i class=\"icon ion-pause\"></i>";
     } else {
       magicObj.paused = true;
-      event.target.innerHTML = "Play";
+      button.innerHTML = "<i class=\"icon ion-play\"></i>";
     }
   }
 
@@ -44,9 +53,9 @@ title: Tyler Hallada
 <div class="options-panel">
   <div class="controls-tab">
     <div class="controls">
-      <button id="play-pause">Pause</button>
+      <button id="play-pause"><i class="icon ion-pause"></i></button>
-      <button id="clear">Clear</button>
+      <button id="clear"><i class="icon ion-refresh"></i></button>
-      <button id="hide-show">Hide</button>
+      <button id="hide-show"><i class="icon ion-chevron-down"></i></button>
     </div>
   </div>
   <div id="options" class="container-full" style="display:block;">