Add FA icons to sidebar and for edit connection

static/css/app.css

@@ -173,6 +173,10 @@
   background: #272c30;
 }
 
+#sidebar ul li i {
+  margin-right: 4px;
+}
+
 #sidebar ul li span {
   padding: 0px 8px 0 12px;
   display: inline-block;
@@ -362,6 +366,10 @@
   top: 10px;
 }
 
+#edit_connection i {
+  margin-right: 4px;
+}
+
 #close_connection_window {
   display: none;
 }

static/index.html

@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta http-equiv="Content-Language" content="en">
   <link rel="stylesheet" href="/static/css/bootstrap.css"></link>
+  <link rel="stylesheet" href="/static/css/font-awesome.css"></link>
   <link rel="stylesheet" href="/static/css/app.css"></link>
   <link rel="icon" type="image/x-icon" href="/static/img/icon.ico" />
   <script type="text/javascript" src="/static/js/jquery.js"></script>
@@ -25,7 +26,7 @@
         <li id="table_connection">Connection</li>
       </ul>
 
-      <a href="#" id="edit_connection" class="btn btn-primary btn-sm">Edit Connection</a>
+      <a href="#" id="edit_connection" class="btn btn-primary btn-sm"><i class="fa fa-gear"></i> Edit Connection</a>
     </div>
     <div id="sidebar">
       <div class="tables-list">

static/js/app.js

@@ -34,7 +34,7 @@ function loadTables() {
 
   getTables(function(data) {
     data.forEach(function(item) {
-      $("<li><span>" + item + "</span></li>").appendTo("#tables");
+      $("<li><span><i class='fa fa-table'></i> " + item + "</span></li>").appendTo("#tables");
     });
   });
 }