switch icons to Font Awesome (for now)

nrenner · Oct 1, 2016 · b108efa · b108efa
1 parent d53fb77
commit b108efa
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -118,3 +118,5 @@ Copyright (c) 2015 Kyle Kemp, Rohit Kalkur, and contributors; [MIT License](http
 Copyright (c) 2012 Makina Corpus, [MIT License](https://github.com/makinacorpus/Leaflet.RestoreView/blob/master/LICENSE)
 * [Leaflet.Locate](https://github.com/domoritz/leaflet-locatecontrol)  
 Copyright (c) 2014 Dominik Moritz, [MIT License](https://github.com/domoritz/leaflet-locatecontrol/blob/gh-pages/LICENSE)
+* [Font Awesome](http://fontawesome.io/license/)  
+by Dave Gandy; [SIL OFL 1.1](http://scripts.sil.org/OFL) (Font), MIT License (Code), CC BY 3.0 (Documentation)
diff --git a/bower.json b/bower.json
@@ -22,7 +22,8 @@
     "seiyria-bootstrap-slider": "~4.8.1",
     "url-search-params": "~0.5.0",
     "Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master",
-    "leaflet.locatecontrol": "^0.52.0"
+    "leaflet.locatecontrol": "^0.52.0",
+    "font-awesome": "^4.6.3"
   },
   "overrides": {
     "leaflet": {
@@ -84,9 +85,16 @@
     },
     "Leaflet.RestoreView": {
       "main": "leaflet.restoreview.js"
+    },
+    "font-awesome": {
+      "main": [
+        "css/font-awesome.css",
+        "fonts/*"
+      ]
     }
   },
   "resolutions": {
-    "leaflet.elevation": "master"
+    "leaflet.elevation": "master",
+    "font-awesome": "^4.6.3"
   }
 }
diff --git a/css/style.css b/css/style.css
@@ -243,12 +243,22 @@ textarea:focus {
     margin-bottom: 0px;
     padding-left: 35px;
 }
-.alert span.glyphicon {
+.alert span.fa {
     position: relative;
     left: -23px;
     margin-right: -1em;
 }
 
+/* activated Font Awesome icon (for EasyButton add ' active' to icon class property) */
+.fa.active {
+    /* use same color as leaflet-locatecontrol */
+    color: #2074B6;
+}
+
+.leaflet-bar .fa {
+    font-size: 16px;
+}
+
 /*
  * DataTables
  */

diff --git a/gulpfile.js b/gulpfile.js
@@ -30,7 +30,7 @@ var paths = {
   ]),
   styles: mainBowerFiles('**/*.css').concat('css/*.css'),
   images: mainBowerFiles('**/*.+(png|gif)'),
-  fonts: mainBowerFiles('**/fonts/**/*'),
+  fonts: mainBowerFiles('**/font-awesome/fonts/*'),
   dest: 'dist',
   destName: 'brouter-web'
 };

diff --git a/index.html b/index.html
@@ -53,8 +53,8 @@
                     <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
                     <div id="profile_message"></div>
                     <div id="profile_buttons">
-                        <button id="upload" type="button" class="btn btn-default btn-xs" data-uploading-text="Uploading..."><span class="glyphicon glyphicon-upload"></span> Upload</button>
-                        <button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
+                        <button id="upload" type="button" class="btn btn-default btn-xs" data-uploading-text="Uploading..."><span class="fa fa-upload"></span> Upload</button>
+                        <button id="clear" type="button" class="btn btn-default btn-xs"><span class="fa fa-trash-o"></span> Clear</button>
                         <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn-xs">Help</a>
                     </div>
                 </form>

diff --git a/js/Map.js b/js/Map.js
@@ -117,8 +117,8 @@ BR.Map = {
         layersControl = L.control.layers(baseLayers, overlays).addTo(map);
 
         L.control.locate({
-            icon: 'glyphicon glyphicon-screenshot',
-            iconLoading: 'glyphicon glyphicon-refresh',
+            icon: 'fa fa-location-arrow',
+            iconLoading: 'fa fa-spinner fa-pulse',
         }).addTo(map);
 
         L.control.scale().addTo(map);

diff --git a/js/control/Message.js b/js/control/Message.js
@@ -12,15 +12,15 @@ BR.Message = L.Class.extend({
 
     _show: function (msg, type) {
         var ele = L.DomUtil.get(this.id),
-            iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove',
+            iconClass = (type === 'warning') ? 'fa-exclamation-triangle' : 'fa-times-circle',
             alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger';
 
         ele.innerHTML =
               '<div class="alert ' + alertClass + ' alert-dismissible fade in" role="alert">'
             + '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">'
             + '    <span aria-hidden="true">&times;</span>'
             + '  </button>'
-            + '  <span class="glyphicon ' + iconClass + '" aria-hidden="true"/></span>'
+            + '  <span class="fa ' + iconClass + '" aria-hidden="true"/></span>'
             + msg
             + '</div>';
 

diff --git a/js/index.js b/js/index.js
@@ -48,15 +48,15 @@
         drawButton = L.easyButton({
             states: [{
                 stateName: 'deactivate-draw',
-                icon: 'glyphicon-ok',
+                icon: 'fa-pencil active',
                 onClick: function (control) {
                     routing.draw(false);
                     control.state('activate-draw');
                 },
                 title: 'Stop drawing route'
             }, {
                 stateName: 'activate-draw',
-                icon: 'glyphicon-road',
+                icon: 'fa-pencil',
                 onClick: function (control) {
                     routing.draw(true);
                     control.state('deactivate-draw');
@@ -66,7 +66,7 @@
         });
 
         deleteButton = L.easyButton(
-            'glyphicon-trash',
+            'fa-trash-o',
             function () {
                 bootbox.confirm({
                     size: 'small',