Map UI: Optimize share icons

index.css

@@ -854,7 +854,22 @@ body:not(.enable-experiments) #labBtn { display: none; }
 #share-tab section { margin-top: 1em; }
 #share-tab section:first-of-type { margin-top: 0; }
 #share-tab input { width: 240px; padding: 5px; border: 1px solid #404040; }
-#share-tab a.share img { width: 40px; height: 40px; padding: 5px; }
+#share-tab a.share {
+  display: inline-block;
+  font-size: 0;
+  width: 40px; height: 40px; margin: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;;
+  background-image: url('res/ui/share.png');
+}
+#share-email     { background-position:      0 0; }
+#share-facebook  { background-position:  -40px 0; }
+#share-google    { background-position:  -80px 0; }
+#share-pinterest { background-position: -120px 0; }
+#share-reddit    { background-position: -160px 0; }
+#share-su        { background-position: -200px 0; }
+#share-tumblr    { background-position: -240px 0; }
+#share-twitter   { background-position: -280px 0; }
 
 /* ============================================================ */
 /* Help Tab */

index.html

@@ -35,7 +35,7 @@
 <meta property="og:site_name" content="The Traveller Map">
 <meta property="fb:admins" content="617166358">
 
-<link rel="stylesheet" href="index.css?update=2018-09-15T21:26:06">
+<link rel="stylesheet" href="index.css?update=2018-09-16T13:03:46">
 
 <!--[if lt IE 11]><script>alert("IE10 is no longer supported.");</script><![endif]-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
@@ -443,37 +443,14 @@ <h3>Developers</h3>
     </section>
 
     <section>
-      <!-- Facebook -->
-      <a class=share target=_blank data-template="http://www.facebook.com/sharer.php?u={{url}}">
-        <img src="res/ui/share/facebook.png" alt="Facebook"></a>
-
-      <!-- Pinterest -->
-      <a class=share target=_blank data-template="http://pinterest.com/pin/create/button/?url={{url}}&amp;description={{text}}">
-        <img src="res/ui/share/pinterest.png" alt="Pinterest"></a>
-
-      <!-- Reddit -->
-      <a class=share target=_blank data-template="http://reddit.com/submit?url={{url}}&amp;title={{text}}">
-        <img src="res/ui/share/reddit.png" alt="Reddit"></a>
-
-      <!-- Twitter -->
-      <a class=share target=_blank data-template="https://twitter.com/share?url={{url}}&amp;text={{text}}&amp;hashtags={{hashtags}}">
-        <img src="res/ui/share/twitter.png" alt="Twitter"></a>
-
-      <!-- Google+ -->
-      <a class=share target=_blank data-template="https://plus.google.com/share?url={{url}}">
-        <img src="res/ui/share/google.png" alt="Google"></a>
-
-      <!-- Tumblr-->
-      <a class=share target=_blank data-template="http://www.tumblr.com/share/link?url={{url}}&amp;title={{text}}">
-        <img src="res/ui/share/tumblr.png" alt="Tumblr"></a>
-
-      <!-- StumbleUpon-->
-      <a class=share target=_blank data-template="http://www.stumbleupon.com/submit?url={{url}}&amp;title={{text}}">
-        <img src="res/ui/share/stumbleupon.png" alt="StumbleUpon"></a>
-
-      <!-- Email -->
-      <a class=share target=_blank data-template="mailto:?Subject={{text}}&amp;Body={{url}}">
-        <img src="res/ui/share/email.png" alt="Email"></a>
+      <a class=share id=share-facebook target=_blank data-template="http://www.facebook.com/sharer.php?u={{url}}">Facebook</a>
+      <a class=share id=share-pinterest target=_blank data-template="http://pinterest.com/pin/create/button/?url={{url}}&amp;description={{text}}">Pinterest</a>
+      <a class=share id=share-reddit target=_blank data-template="http://reddit.com/submit?url={{url}}&amp;title={{text}}">Reddit</a>
+      <a class=share id=share-twitter target=_blank data-template="https://twitter.com/share?url={{url}}&amp;text={{text}}&amp;hashtags={{hashtags}}">Twitter</a>
+      <a class=share id=share-google target=_blank data-template="https://plus.google.com/share?url={{url}}">Google+</a>
+      <a class=share id=share-tumblr target=_blank data-template="http://www.tumblr.com/share/link?url={{url}}&amp;title={{text}}">Tumblr</a>
+      <a class=share id=share-su target=_blank data-template="http://www.stumbleupon.com/submit?url={{url}}&amp;title={{text}}">StumbleUpon</a>
+      <a class=share id=share-email target=_blank data-template="mailto:?Subject={{text}}&amp;Body={{url}}">Email</a>
     </section>
 
     <section>