convert toolbar icons to svg

js/components/main.js

@@ -899,14 +899,14 @@ class Main extends ImmutableComponent {
               <div className='backforward'>
                 <LongPressButton
                   l10nId='backButton'
-                  className='back fa fa-angle-left'
+                  className='navigationButton back'
                   disabled={!activeFrame || !activeFrame.get('canGoBack')}
                   onClick={this.onBack}
                   onLongPress={this.onBackLongPress}
                 />
                 <LongPressButton
                   l10nId='forwardButton'
-                  className='forward fa fa-angle-right'
+                  className='navigationButton forward'
                   disabled={!activeFrame || !activeFrame.get('canGoForward')}
                   onClick={this.onForward}
                   onLongPress={this.onForwardLongPress}

js/components/navigationBar.js

@@ -131,20 +131,17 @@ class NavigationBar extends ImmutableComponent {
           this.titleMode
           ? null
           : this.loading
-            ? <Button iconClass='fa-times'
-              l10nId='stopButton'
-              className='navbutton stop-button'
+            ? <Button l10nId='stopButton'
+              className='navigationButton stopButton'
               onClick={this.onStop} />
-            : <Button iconClass='fa-repeat'
-              l10nId='reloadButton'
-              className='navbutton reload-button'
+            : <Button l10nId='reloadButton'
+              className='navigationButton reloadButton'
               onClick={this.onReload} />
         }
         {
           !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-          ? <Button iconClass='fa-home'
-            l10nId='homeButton'
-            className='navbutton homeButton'
+          ? <Button l10nId='homeButton'
+            className='navigationButton homeButton'
             onClick={this.onHome} />
           : null
         }

less/navigationBar.less

@@ -442,17 +442,21 @@
 
     .back,
     .forward {
-      width: @navbarButtonWidth;
+      background-color: @buttonColor;
+      width: 12px;
+      height: 15px;
+      margin: 0 6px;
     }
-
     .back {
       padding-right: @navbarButtonSpacing;
+      -webkit-mask-image: url('../img/toolbar/back_btn.svg');
+      -webkit-mask-repeat: no-repeat;
     }
-
     .forward {
       padding-left: @navbarButtonSpacing;
+      -webkit-mask-image: url('../img/toolbar/forward_btn.svg');
+      -webkit-mask-repeat: no-repeat;
     }
-
   }
 
   // Navigation bar at the center
@@ -519,6 +523,38 @@
   }
 }
 
+#navigator {
+  .startButtons {
+    .navigationButton {
+      background-color: @buttonColor;
+      width: 12px;
+      height: 15px;
+      margin: 0 6px;
+
+      &:hover {
+        background-color: @gray;
+      }
+    }
+
+    .stopButton {
+      -webkit-mask-image: url('../img/toolbar/stoploading_btn.svg');
+      -webkit-mask-repeat: no-repeat;
+    }
+
+    .reloadButton {
+      -webkit-mask-image: url('../img/toolbar/reload_btn.svg');
+      -webkit-mask-repeat: no-repeat;
+    }
+
+    .homeButton {
+      -webkit-mask-image: url('../img/toolbar/home_btn.svg');
+      -webkit-mask-repeat: no-repeat;
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
 
 .navigatorWrapper {
   justify-content: space-between;
@@ -547,9 +583,7 @@
       }
 
       &:not([disabled]):hover {
-        color: @buttonColor;
-        opacity: 1.0;
-        background-color: white;
+        opacity: 0.2;
       }
     }