Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FontAwesome Based Leaflet.js Marker Shadows
/* 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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.