diff --git a/Control.FullScreen.css b/Control.FullScreen.css
index 96ae11e..e07fea5 100644
--- a/Control.FullScreen.css
+++ b/Control.FullScreen.css
@@ -1,5 +1,7 @@
-.fullscreen-icon { background-image: url(icon-fullscreen.png); }
-.leaflet-retina .fullscreen-icon { background-image: url(icon-fullscreen-2x.png); background-size: 26px 26px; }
+.fullscreen-icon { background-image: url(icon-fullscreen.svg); background-size:26px 52px; }
+.fullscreen-icon.leaflet-fullscreen-on { background-position:0 -26px; }
+.leaflet-touch .fullscreen-icon { background-position: 2px 2px; }
+.leaflet-touch .fullscreen-icon.leaflet-fullscreen-on { background-position: 2px -24px; }
/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
.leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
diff --git a/Control.FullScreen.js b/Control.FullScreen.js
index ed8c85d..9525621 100644
--- a/Control.FullScreen.js
+++ b/Control.FullScreen.js
@@ -231,7 +231,7 @@
this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
this._map.fullscreenControl = this;
- this._map.on('enterFullscreen exitFullscreen', this._toggleTitle, this);
+ this._map.on('enterFullscreen exitFullscreen', this._toggleState, this);
return container;
},
@@ -306,8 +306,9 @@
}
},
- _toggleTitle: function () {
+ _toggleState: function () {
this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
+ this._map._isFullscreen ? L.DomUtil.removeClass(this.link, 'leaflet-fullscreen-on') : L.DomUtil.addClass(this.link, 'leaflet-fullscreen-on');
},
_handleFullscreenChange: function () {
diff --git a/README.md b/README.md
index 44085bb..79e59bd 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ Inspired by http://elidupuis.github.com/leaflet.zoomfs/
Use the native javascript fullscreen API with help of https://github.com/sindresorhus/screenfull.js
+Icons from [Font Awesome v5.15.4](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.15.4): [Creative Commons Attribution 4.0](https://fontawesome.com/license/free)
+
Released under the MIT License http://opensource.org/licenses/mit-license.php
How ?
diff --git a/icon-fullscreen-2x.png b/icon-fullscreen-2x.png
deleted file mode 100644
index efc0dfb..0000000
Binary files a/icon-fullscreen-2x.png and /dev/null differ
diff --git a/icon-fullscreen.png b/icon-fullscreen.png
deleted file mode 100644
index 8ee2447..0000000
Binary files a/icon-fullscreen.png and /dev/null differ
diff --git a/icon-fullscreen.svg b/icon-fullscreen.svg
new file mode 100644
index 0000000..6107d8c
--- /dev/null
+++ b/icon-fullscreen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 84626ce..cefee6b 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,11 @@
Leaflet.Control.FullScreen Demo
+
+