FontAwesome Based Leaflet.js Marker Shadows

leaflet-marker-icon.less

/* This uses Leaflet.js's markers:
 * L.divIcon({
 *	iconSize: [30, 0],
 *	className: 'comment',
 *	html: '<i class="fa fa-fw"></i>'
 * });
 * to inject a FontAwesome icon into the marker .leaflet-marker-icon.
 * It copies that same icon using the :after pseudo element and applies
 * a shadow transform to it. Use content to change the icon.
 */
.leaflet-marker-icon{
	
	i{
		position: relative;
		z-index: 2;
	}
	
	&:after{
		font-size: 2em;
		width: 1.2857em;
		text-align: center;
		display: inline-block;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: transparent;
		text-shadow: 0px 0px 4px fadeOut(#000, 50%);
		position: relative;
		top: -30px;
		left: -20px;
		z-index: 1;
		-webkit-transform: skew(0deg, -20deg) rotate(20deg) scale(1.2);
		-ms-transform: skewX(0deg) skewY(-20deg) rotate(20deg) scale(1.2);
		transform: skew(0deg, -20deg) rotate(20deg) scale(1.2);
	}
	
	/* An example with fa-comment icon */
	&.comment{
		
		i{
			content: "\f075";
		}
		
		&:after{
			content: "\f075";
			top: -27px;
			left: 6px;
		}
	}
}