replace leaflet images with font awesome icons

style/_fa.scss

@@ -32,3 +32,4 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-track-off-track:before { content: fa-content($fa-var-hiking); }
 .#{$fa-css-prefix}-track-main:before { content: fa-content($fa-var-hiking); }
 .#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
+.#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }

style/spot.scss

@@ -40,6 +40,7 @@
 		}
 	}
 
+	/* Leaflet patches */
 	.leaflet-control-layers.leaflet-control {
 		background-color: rgba(255, 255, 255, 0.6);
 		font-family: Roboto, Arial, sans-serif;
@@ -48,7 +49,7 @@
 		margin: 1em;
 		
 		&.leaflet-control-layers-expanded {
-			color: #000000;
+			color: #222;
 			width: calc(100% - 2em - 16px);
 		}
 		
@@ -57,6 +58,23 @@
 		}
 	}
 
+	/* Replace Layers image with font awesome icon */
+	.leaflet-control-layers-toggle {
+		font-size: 28px;
+		text-align: center;
+		line-height: 44px;
+		text-decoration: none;
+		color: #888;
+		text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+		background: none;
+		@extend .fa;
+		@extend .fa-layers;
+	}
+
+	.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+		display: none;
+	}
+
 	#legend {
 		//right: 30vw;
 					
@@ -91,7 +109,6 @@
 	right: 0;
 	top: 0;
 	bottom: 0;
-	margin-right: 1em;
 	width: calc(30% - 1em);
 	z-index: 999;
 	
@@ -154,10 +171,10 @@
 			color: #323268;
 			border-radius: 3px;
 			width: calc(100% - 1em);
-			box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);
+			box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
 			
 			&:first-child {
-				margin-top: 2em;
+				margin-top: 1em;
 			}
 			
 			.message {