swapping fa-reorder in the place of icon-bar

src/_includes/navbar.html

@@ -3,9 +3,7 @@
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+        <i class="fa fa-reorder fa-lg"></i>
       </button>
       <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a>
     </div>

src/assets/less/site/bootstrap/navbar.less

@@ -17,3 +17,17 @@
 }
 
 .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: @jumbotron-border; }
+
+.navbar-inverse .navbar-toggle {
+  color: @jumbotron-color;
+  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+  padding: 4px 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  &:hover {
+    background-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
+    border-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
+    color: @jumbotron-bg;
+    text-shadow: 0 -1px 0 @jumbotron-color;
+  }
+}

src/assets/less/site/bootstrap/variables.less

@@ -89,8 +89,7 @@
 @navbar-inverse-link-active-bg:             @navbar-inverse-border;
 
 // Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            @fa-green-dark;
-@navbar-inverse-toggle-icon-bar-bg:         @jumbotron-color;
+@navbar-inverse-toggle-hover-bg:            @jumbotron-color;
 @navbar-inverse-toggle-border-color:        mix(@jumbotron-color, @fa-green, 75%);