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/ionicons.min.css

@@ -0,0 +1,11 @@
+@charset "UTF-8";/*!
+  Ionicons, v2.0.0
+  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
+  https://twitter.com/benjsperry  https://twitter.com/ionicframework
+  MIT License: https://github.com/driftyco/ionicons
+
+  Android-style icons originally built by Google’s
+  Material Design Icons: https://github.com/google/material-design-icons
+  used under CC BY http://creativecommons.org/licenses/by/4.0/
+  Modified icons to fit ionicon’s grid from original.
+*/@font-face{font-family:"Ionicons";src:url("/fonts/ionicons.eot?v=2.0.0");src:url("/fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),url("/fonts/ionicons.ttf?v=2.0.0") format("truetype"),url("/fonts/ionicons.woff?v=2.0.0") format("woff"),url("/fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");font-weight:normal;font-style:normal}.ion,.ionicons,.ion-alert:before,.ion-alert-circled:before,.ion-android-add:before,.ion-android-add-circle:before,.ion-android-alarm-clock:before,.ion-android-alert:before,.ion-android-apps:before,.ion-android-archive:before,.ion-android-arrow-back:before,.ion-android-arrow-down:before,.ion-android-arrow-dropdown:before,.ion-android-arrow-dropdown-circle:before,.ion-android-arrow-dropleft:before,.ion-android-arrow-dropleft-circle:before,.ion-android-arrow-dropright:before,.ion-android-arrow-dropright-circle:before,.ion-android-arrow-dropup:before,.ion-android-arrow-dropup-circle:before,.ion-android-arrow-forward:before,.ion-android-arrow-up:before,.ion-android-attach:before,.ion-android-bar:before,.ion-android-bicycle:before,.ion-android-boat:before,.ion-android-bookmark:before,.ion-android-bulb:before,.ion-android-bus:before,.ion-android-calendar:before,.ion-android-call:before,.ion-android-camera:before,.ion-android-cancel:before,.ion-android-car:before,.ion-android-cart:before,.ion-android-chat:before,.ion-android-checkbox:before,.ion-android-checkbox-blank:before,.ion-android-checkbox-outline:before,.ion-android-checkbox-outline-blank:before,.ion-android-checkmark-circle:before,.ion-android-clipboard:before,.ion-android-close:before,.ion-android-cloud:before,.ion-android-cloud-circle:before,.ion-android-cloud-done:before,.ion-android-cloud-outline:before,.ion-android-color-palette:before,.ion-android-compass:before,.ion-android-contact:before,.ion-android-contacts:before,.ion-android-contract:before,.ion-android-create:before,.ion-android-delete:before,.ion-android-desktop:before,.ion-android-document:before,.ion-android-done:before,.ion-android-done-all:before,.ion-android-download:before,.ion-android-drafts:before,.ion-android-exit:before,.ion-android-expand:before,.ion-android-favorite:before,.ion-android-favorite-outline:before,.ion-android-film:before,.ion-android-folder:before,.ion-android-folder-open:before,.ion-android-funnel:before,.ion-android-globe:before,.ion-android-hand:before,.ion-android-hangout:before,.ion-android-happy:before,.ion-android-home:before,.ion-android-image:before,.ion-android-laptop:before,.ion-android-list:before,.ion-android-locate:before,.ion-android-lock:before,.ion-android-mail:before,.ion-android-map:before,.ion-android-menu:before,.ion-android-microphone:before,.ion-android-microphone-off:before,.ion-android-more-horizontal:before,.ion-android-more-vertical:before,.ion-android-navigate:before,.ion-android-notifications:before,.ion-android-notifications-none:before,.ion-android-notifications-off:before,.ion-android-open:before,.ion-android-options:before,.ion-android-people:before,.ion-android-person:before,.ion-android-person-add:before,.ion-android-phone-landscape:before,.ion-android-phone-portrait:before,.ion-android-pin:before,.ion-android-plane:before,.ion-android-playstore:before,.ion-android-print:before,.ion-android-radio-button-off:before,.ion-android-radio-button-on:before,.ion-android-refresh:before,.ion-android-remove:before,.ion-android-remove-circle:before,.ion-android-restaurant:before,.ion-android-sad:before,.ion-android-search:before,.ion-android-send:before,.ion-android-settings:before,.ion-android-share:before,.ion-android-share-alt:before,.ion-android-star:before,.ion-android-star-half:before,.ion-android-star-outline:before,.ion-android-stopwatch:before,.ion-android-subway:before,.ion-android-sunny:before,.ion-android-sync:before,.ion-android-textsms:before,.ion-android-time:before,.ion-android-train:before,.ion-android-unlock:before,.ion-android-upload:before,.ion-android-volume-down:before,.ion-android-volume-mute:before,.ion-android-volume-off:before,.ion-android-volume-up:before,.ion-android-walk:before,.ion-android-warning:before,.ion-android-watch:before,.ion-android-wifi:before,.ion-aperture:before,.ion-archive:before,.ion-arrow-down-a:before,.ion-arrow-down-b:before,.ion-arrow-down-c:before,.ion-arrow-expand:before,.ion-arrow-graph-down-left:before,.ion-arrow-graph-down-right:before,.ion-arrow-graph-up-left:before,.ion-arrow-graph-up-right:before,.ion-arrow-left-a:before,.ion-arrow-left-b:before,.ion-arrow-left-c:before,.ion-arrow-move:before,.ion-arrow-resize:before,.ion-arrow-return-left:before,.ion-arrow-return-right:before,.ion-arrow-right-a:before,.ion-arrow-right-b:before,.ion-arrow-right-c:before,.ion-arrow-shrink:before,.ion-arrow-swap:before,.ion-arrow-up-a:before,.ion-arrow-up-b:before,.ion-arrow-up-c:before,.ion-asterisk:before,.ion-at:before,.ion-backspace:before,.ion-backspace-outline:before,.ion-bag:before,.ion-battery-charging:before,.ion-battery-empty:before,.ion-battery-full:befoLine truncated

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;">