Updating test app

dist/ratchet.css

@@ -363,6 +363,11 @@ strong {
   -webkit-box-flex: 1;
   box-flex: 1;
 }
+.tab-item .icon {
+  width: 24px;
+  height: 24px;
+  margin-top: -2px;
+}
 
 .tab-label {
   margin-top: -2px;

examples/app-default/checkout.html

@@ -33,19 +33,19 @@
     <ul class="tab-inner">
       <li class="tab-item active">
         <a href="index.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-share"></span>
           <div class="tab-label">Movies</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="theaters.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-pages"></span>
           <div class="tab-label">Theaters</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="settings.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-sound"></span>
           <div class="tab-label">Settings</div>
         </a>
       </li>

examples/app-default/choose-movie.html

@@ -34,19 +34,19 @@
     <ul class="tab-inner">
       <li class="tab-item">
         <a href="index.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-share"></span>
           <div class="tab-label">Movies</div>
         </a>
       </li>
       <li class="tab-item active">
         <a href="theaters.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-pages"></span>
           <div class="tab-label">Theaters</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="settings.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-sound"></span>
           <div class="tab-label">Settings</div>
         </a>
       </li>

examples/app-default/choose-theater.html

@@ -34,19 +34,19 @@
     <ul class="tab-inner">
       <li class="tab-item active">
         <a href="index.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-share"></span>
           <div class="tab-label">Movies</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="theaters.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-pages"></span>
           <div class="tab-label">Theaters</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="settings.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-sound"></span>
           <div class="tab-label">Settings</div>
         </a>
       </li>

examples/app-default/settings.html

@@ -26,19 +26,19 @@
     <ul class="tab-inner">
       <li class="tab-item">
         <a href="index.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-share"></span>
           <div class="tab-label">Movies</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="theaters.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-pages"></span>
           <div class="tab-label">Theaters</div>
         </a>
       </li>
       <li class="tab-item active">
         <a href="settings.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-sound"></span>
           <div class="tab-label">Settings</div>
         </a>
       </li>

examples/app-default/theaters.html

@@ -31,19 +31,19 @@
     <ul class="tab-inner">
       <li class="tab-item">
         <a href="index.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-share"></span>
           <div class="tab-label">Movies</div>
         </a>
       </li>
       <li class="tab-item active">
         <a href="theaters.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-pages"></span>
           <div class="tab-label">Theaters</div>
         </a>
       </li>
       <li class="tab-item">
         <a href="settings.html" data-transition="fade">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <span class="icon icon-sound"></span>
           <div class="tab-label">Settings</div>
         </a>
       </li>

lib/sass/bars.scss

@@ -101,6 +101,12 @@
   text-align: center;
   -webkit-box-flex: 1;
           box-flex: 1;
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-top: -2px;
+  }
 }
 
 // Label for tab