Create a lightweight L.divIcon for Leaflet using css and icon fonts

leaflet-css-divicon.txt

// modified from http://codepen.io/gisminister/pen/Hdorv

// Create a marker
var myMarker = L.divIcon({
    className: 'map-marker marker-color-gray a-class',
    iconSize: [28,28],
    html:'<i class="fa fa-fw fa-2x fa-question"></i>'             // FontAwesome.io
});

// Style with css
.map-marker{
  text-align: center;
  position: absolute;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;                    // icon color
  width: 28px;
  height: 28px;
  border-radius: 50%;             // make a circle
  line-height: 22pt;
  font-size: 22px;
  font-family: 'FontAwesome';     // anything goes
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); 
}

// Style background
.map-marker.marker-color-gray {background: lightgray;}

// If you want to change the icon
.map-marker.another-class:before{
  content: '\f1f8';
}