D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
eSlivinski
Full window
Github gist
Leaflet SVG Icon Font Markers
<!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> — Map data © <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>
https://unpkg.com/leaflet@0.7.7/dist/leaflet.js