Use Glyphicons font for gear icon, rather than image.

(imported from commit 46e2524ab0bcf4e52bd09525b45d15198a82da03)

templates/zephyr/base.html

@@ -17,6 +17,7 @@
     <link href="/static/third/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="/static/third/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+    <link href="/static/third/glyphicons/css/glyphicons.css" rel="stylesheet">
     <link href="/static/public/favicon.ico?v=2" rel="shortcut icon">
     {# We need to import jQuery before Bootstrap #}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

templates/zephyr/index.html

@@ -140,7 +140,9 @@ var people_list = [
                 </li>
                 <!-- /stuff that gets visible in skinny mode -->
                 <li class="dropdown" id="gear-menu">
-                  <a id="settings-dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><img src="/static/third/glyphicons/glyphicons_136_cogwheel.png" /> <b class="caret"></b></a>
+                  <a id="settings-dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
+                    <span class="glyphicons cogwheel"><i></i></span><b class="caret"></b>
+                  </a>
                   <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="settings-dropdown">
                     <li title="Home">
                       <a href="#home" data-toggle="tab" onclick="narrow.restore_home_state();">

zephyr/static/styles/zephyr.css

@@ -731,3 +731,8 @@ table.floating_recipient {
         padding-left: 5px;
     }
 }
+
+#settings-dropdown .glyphicons {
+    margin-right: -10px;
+    margin-bottom: 5px;
+}