Replaced font awesome with dedicated SVG for better compatibility

consbio · Aug 29, 2016 · 8ba64f0 · 8ba64f0
1 parent 8e5dee8
commit 8ba64f0
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 20 deletions.
diff --git a/L.Control.Geonames.css b/L.Control.Geonames.css
@@ -2,13 +2,12 @@
     background-color: #FFF;
 }
 .leaflet-geonames-search a{
-    font-size: 18px;
     border-radius: 4px;
     display: inline-block;
     float:right;
 }
 .leaflet-geonames-search a {
-    background: none !important;
+    background-color: transparent !important;
     border: none !important;
 }
 .leaflet-geonames-search form {
@@ -39,10 +38,6 @@
 .leaflet-geonames-search input:focus {
     outline: 0;
 }
-.leaflet-geonames-search.active a {
-    border-radius: 0 4px 4px 0;
-    border-bottom-color: #FFF;
-}
 .leaflet-geonames-search.active input {
     display: inline-block;
 }
@@ -53,4 +48,31 @@
 .leaflet-geonames-search ul.noResults {
     color: #999;
     font-style: italic;
+}
+.leaflet-geonames-icon {
+    background: url(ic_directions_black_24px.svg) no-repeat center center;
+    background-size: 24px 24px;
+    background-color: transparent;
+}
+.leaflet-geonames-icon-working {
+    background-image: url(ic_cached_black_24px.svg);
+    animation: spin 2s infinite linear;
+}
+@-webkit-keyframes spin{
+    0%{
+        -webkit-transform:rotate(0deg);
+        transform:rotate(0deg)
+    }
+    100%{
+        -webkit-transform:rotate(359deg);
+        transform:rotate(359deg)}
+}
+@keyframes spin{
+    0%{
+        -webkit-transform:rotate(0deg);
+        transform:rotate(0deg)
+    }
+    100%{
+        -webkit-transform:rotate(359deg);
+        transform:rotate(359deg)}
 }
diff --git a/L.Control.Geonames.js b/L.Control.Geonames.js
@@ -11,8 +11,8 @@ L.Control.Geonames = L.Control.extend({
         username: '', //Geonames account username.  Must be provided
         maxresults: 5, //Maximum number of results to display per search
         zoomLevel: null, //Max zoom level to zoom to for location.  If null, will use the map's max zoom level.
-        className: 'fa fa-search', //class for icon
-        workingClass: 'fa-spin', //class for search underway
+        className: 'leaflet-geonames-icon', //class for icon
+        workingClass: 'leaflet-geonames-icon-working', //class for search underway
         featureClasses: ['A', 'H', 'L', 'P', 'R', 'T', 'U', 'V'], //feature classes to search against.  See: http://www.geonames.org/export/codes.html
         baseQuery: 'isNameRequired=true', //The core query sent to GeoNames, later combined with other parameters above
         position: 'topleft',

diff --git a/L.Control.Geonames.min.js b/L.Control.Geonames.min.js
diff --git a/README.md b/README.md
@@ -33,11 +33,7 @@ Include the CSS:
 <link rel="stylesheet" href="L.Control.Geonames.css" />
 ```
 
-This control uses [Font Awesome](http://fontawesome.io/) for the icon by default.  To use, include:
-
-```
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
-```
+This control uses [Google Material Icons](https://design.google.com/icons) by default.
 
 
 Include the JavaScript:
@@ -54,8 +50,8 @@ var control = L.control.geonames({
     username: '',  // Geonames account username.  Must be provided
     zoomLevel: null,  // Max zoom level to zoom to for location.  If null, will use the map's max zoom level.
     maxresults: 5,  // Maximum number of results to display per search
-    className: 'fa fa-crosshairs',  // class for icon
-    workingClass: 'fa-spin',  // class for search underway
+    className: 'leaflet-geonames-icon', //class for icon
+    workingClass: 'leaflet-geonames-icon-working', //class for search underway
     featureClasses: ['A', 'H', 'L', 'P', 'R', 'T', 'U', 'V'],  // feature classes to search against.  See: http://www.geonames.org/export/codes.html
     baseQuery: 'isNameRequired=true',  // The core query sent to GeoNames, later combined with other parameters above
     position: 'topleft',

diff --git a/examples/adminCodes.html b/examples/adminCodes.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Leaflet Geonames Search Control</title>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css"/>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="../L.Control.Geonames.css"/>
     <style>
         #Nav li {

diff --git a/examples/basic.html b/examples/basic.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Leaflet Geonames Search Control</title>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css" />
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
     <link rel="stylesheet" href="../L.Control.Geonames.css" />
     <style>
         #Nav li {

diff --git a/examples/bbox.html b/examples/bbox.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Leaflet Geonames Search Control</title>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css"/>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="../L.Control.Geonames.css"/>
     <style>
         #Nav li {

diff --git a/examples/locale.html b/examples/locale.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Leaflet Geonames Search Control</title>
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css"/>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="../L.Control.Geonames.css"/>
     <style>
         #Nav li {

diff --git a/ic_cached_black_24px.svg b/ic_cached_black_24px.svg
diff --git a/ic_directions_black_24px.svg b/ic_directions_black_24px.svg