D3 Examples - Leaflet SVG Icon Font Markers

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
    <script src="./IconContent.js"></script>
    <script src="./L.IconMarker.js"></script>
     <style>
      #map {
        width: 960px;
        height: 500px;
      }
      .marker-icon {
        font-family: 'FontAwesome';
      }
    </style>
  </head>
  <body>
    <!--
      FYI to insure that the font icons are rendered properly
      It is necessary to either include at least one instance of the icon
      Font in your HTML OR use of font loader such as typekit's webfontloader
      (https://github.com/typekit/webfontloader)
   -->
    <i class="fa fa-home" style="display: none;"></i>
    <div id="map"></div>
​
    <script>
      var map = L.map('map').setView([42.8864, -78.8784], 13);
​
      L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 20,
        ext: 'png'
      }).addTo(map);
​
      L.iconMarker([42.8864, -78.8784], {
        fillColor: 'blue',
        className: 'fa-fort-awesome',
      })
      .bindPopup('Font Awesome Marker Icons')
      .addTo(map)
      .openPopup();
​
      L.iconMarker([42.9051, -78.8717], {
        fillColor: 'red',
        className: 'fa-headphones'
      })
      .addTo(map);
​
      L.iconMarker([42.8721,-78.9282], {
        fillColor: '#00bcd4',
        className: 'fa-umbrella'
      })
      .addTo(map);
​
      L.iconMarker([42.9002,-78.932], {
        fillColor: 'orange',
        className: 'fa-plane'
      })
      .addTo(map);
​
      L.iconMarker([42.8894,-78.8247], {
        fillColor: 'purple',
        className: 'fa-bath',
      })
      .addTo(map);
​
      L.iconMarker([42.9095,-78.8346], {
        fillColor: 'gold',
        className: 'fa-car'
      })
      .addTo(map);
​
      L.iconMarker([42.8693,-78.8597], {
        fillColor: '#8bc34a',
        className: 'fa-thumbs-up',
      })
      .addTo(map);
​
    </script>
  </body>
</html>
​
    