Special Html Markers

This CSS is for the "add a special HTML marker" option in Maps (see image). I have used this only to get icons from FontAwesome and RpgAwesome as map pins.

Whenever I add for example a gem icon as an html marker, i use for the marker field:

<i class="fas pin-blue fa-gem"></i>

when i would like my blue pin, or

<i class="fas pin-green fa-gem"></i>

when i would like my green one. In the World Configuration CSS, I have:

user-css .pin-blue {
  color: #4d94ff;
  text-shadow:
  -1px -1px 0 #fff,
  1px -1px 0 #fff,
  -1px 1px 0 #fff,
  1px 1px 0 #fff;
  display: inline-block;
  transform: translate(0px, -20px) ;
}
user-css .pin-green {
  color: #00b33c;
  text-shadow:
  -1px -1px 0 #196120,
  1px -1px 0 #196120,
  -1px 1px 0 #196120,
  1px 1px 0 #196120;
  display: inline-block;
  transform: translate(0px, -20px) ;
}
.user-css.htmlIcon {
   background: rgba(0, 0, 0, 0.0) ;
}

For each of the different types of pin (.pin-blue, .pin-green):

color: the colour of the icon
text-shadow: adds a coloured border around the icon
display: inline-block is necessary to move the icon to the desired position. Only necessary if you use RPGAwesome, FontAwesome icons are inline-block by default
transform: the icon is placed approximately in the middle of a 51 x 51 px square. It is itself smaller than that. However, the anchor point for the icon is top-center, which is not where the icon will be. This makes the markers move up and down as you zoom in and out. The transform moves the actual icon up so that it sits on it's anchor and does not move over the map.

for all map pins (.htmlIcon):