diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..567609b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+build/
diff --git a/htdocs/css/bootstrap.css b/htdocs/css/bootstrap.css
index 14cc1f4..bceb082 100644
--- a/htdocs/css/bootstrap.css
+++ b/htdocs/css/bootstrap.css
@@ -1993,6 +1993,7 @@ select[multiple].input-lg {
   font-weight: normal;
   line-height: 1.428571429;
   text-align: center;
+  text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
@@ -2073,6 +2074,11 @@ fieldset[disabled] .btn-default.active {
   color: #fff;
   background-color: #333;
 }
+.btn-label {
+  margin-left: 8px;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
 .btn-primary {
   color: #fff;
   background-color: #428bca;
@@ -2370,14 +2376,13 @@ input[type="button"].btn-block {
   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
+#currenttrack {
+  vertical-align: middle;
+}
 .glyphicon {
-  position: relative;
-  top: 1px;
   display: inline-block;
   font-family: 'Glyphicons Halflings';
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
+  vertical-align: middle;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2415,9 +2420,6 @@ input[type="button"].btn-block {
 .glyphicon-heart:before {
   content: "\e005";
 }
-.glyphicon-star:before {
-  content: "\e006";
-}
 .glyphicon-star-empty:before {
   content: "\e007";
 }
@@ -2457,9 +2459,6 @@ input[type="button"].btn-block {
 .glyphicon-cog:before {
   content: "\e019";
 }
-.glyphicon-trash:before {
-  content: "\e020";
-}
 .glyphicon-home:before {
   content: "\e021";
 }
@@ -2487,9 +2486,6 @@ input[type="button"].btn-block {
 .glyphicon-play-circle:before {
   content: "\e029";
 }
-.glyphicon-repeat:before {
-  content: "\e030";
-}
 .glyphicon-refresh:before {
   content: "\e031";
 }
@@ -2697,9 +2693,6 @@ input[type="button"].btn-block {
 .glyphicon-leaf:before {
   content: "\e103";
 }
-.glyphicon-fire:before {
-  content: "\e104";
-}
 .glyphicon-eye-open:before {
   content: "\e105";
 }
@@ -2715,12 +2708,6 @@ input[type="button"].btn-block {
 .glyphicon-calendar:before {
   content: "\e109";
 }
-.glyphicon-random:before {
-  content: "\e110";
-}
-.glyphicon-comment:before {
-  content: "\e111";
-}
 .glyphicon-magnet:before {
   content: "\e112";
 }
@@ -2817,9 +2804,6 @@ input[type="button"].btn-block {
 .glyphicon-heart-empty:before {
   content: "\e143";
 }
-.glyphicon-link:before {
-  content: "\e144";
-}
 .glyphicon-phone:before {
   content: "\e145";
 }
@@ -2880,9 +2864,6 @@ input[type="button"].btn-block {
 .glyphicon-record:before {
   content: "\e165";
 }
-.glyphicon-save:before {
-  content: "\e166";
-}
 .glyphicon-open:before {
   content: "\e167";
 }
@@ -3210,7 +3191,7 @@ input[type="button"].btn-block {
 }
 .btn-group-lg > .btn {
   padding: 10px 16px;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1.33;
   border-radius: 6px;
 }
diff --git a/htdocs/index.html b/htdocs/index.html
index 066029a..bb51006 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -170,19 +170,19 @@
         <div class="btn-toolbar">
           <div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
             <button id="btnrandom" type="button" class="btn btn-default">
-              <span class="glyphicon glyphicon-random"></span> Random
+              <span class="glyphicon">&#xe110;</span><span class="btn-label">Random</span>
             </button>
             <button id="btnconsume" type="button" class="btn btn-default">
-              <span class="glyphicon glyphicon-fire"></span> Consume
+              <span class="glyphicon">&#xe104;</span><span class="btn-label">Consume</span>
             </button>
             <button id="btnsingle" type="button" class="btn btn-default">
-              <span class="glyphicon glyphicon-star"></span> Single
+              <span class="glyphicon">&#xe006;</span><span class="btn-label">Single</span>
             </button>
             <button id="btncrossfade" type="button" class="btn btn-default">
-              <span class="glyphicon glyphicon-link"></span> Crossfade
+              <span class="glyphicon">&#xe144;</span><span class="btn-label">Crossfade</span>
             </button>
             <button id="btnrepeat" type="button" class="btn btn-default">
-              <span class="glyphicon glyphicon-repeat"></span> Repeat
+              <span class="glyphicon">&#xe030;</span><span class="btn-label">Repeat</span>
             </button>
           </div>
           <div id="btn-outputs-block" class="btn-group-vertical btn-block btn-group-lg">
@@ -205,18 +205,18 @@
 
           <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
-              <span class="glyphicon glyphicon-trash"></span> Clear queue
+              <span class="glyphicon">&#xe020;</span><span class="btn-label">Clear queue</span>
             </button>
             <a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default">
-              <span class="glyphicon glyphicon-save"></span> Save queue
+              <span class="glyphicon">&#xe166;</span><span class="btn-label">Save queue</span>
             </a>
           </div>
 
-            <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
-              <button type="button" class="btn btn-default" id="btnnotify">
-               <span class="glyphicon glyphicon-comment"></span> Notifications
-              </button>
-            </div>
+  	      <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
+  	        <button type="button" class="btn btn-default" id="btnnotify">
+                    <span class="glyphicon">&#xe111;</span><span class="btn-label">Notifications</span>
+  	        </button>
+  	      </div>
         </div>
       </div><!-- /.col-md-2 -->
     </div><!-- /.row -->
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index b6e7644..40a5048 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -539,7 +539,7 @@ function webSocketConnect() {
                 case "outputnames":
                     $('#btn-outputs-block button').remove();
                     $.each(obj.data, function(id, name){
-                        var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
+                        var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon">&#xe038;</span><span class="btn-label" title="'+name+'">'+name+'</span></button>');
                         btn.appendTo($('#btn-outputs-block'));
                     });
                     /* remove cache, since the buttons have been recreated */