Revert "convert toolbar icons to svg"

js/components/main.js

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

js/components/navigationBar.js

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

less/navigationBar.less

@@ -442,21 +442,17 @@
 
     .back,
     .forward {
-      background-color: @buttonColor;
-      width: 12px;
-      height: 15px;
-      margin: 0 6px;
+      width: @navbarButtonWidth;
     }
+
     .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
@@ -523,38 +519,6 @@
   }
 }
 
-#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;
@@ -584,7 +548,9 @@
       }
 
       &:not([disabled]):hover {
-        opacity: 0.2;
+        color: @buttonColor;
+        opacity: 1.0;
+        background-color: white;
       }
     }