JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
<script src="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<div id="map" style="width: 800px; height: 500px;"></div>
CSS
.awesome-marker i {
font-size: 18px;
margin-top: 5px;
}
JavaScript
// Setup map
var map = L.map('map').setView([51.932994, 4.509373], 14);
// Setup tilelayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.AwesomeMarkers.Icon.prototype.options.prefix = 'ion';
// Add markers to map
// Ionicons
L.marker([51.941196, 4.512291], {
icon: L.AwesomeMarkers.icon({
icon: 'help-buoy',
markerColor: 'red'
})
}).addTo(map);
L.marker([51.927913, 4.521303], {
icon: L.AwesomeMarkers.icon({
icon: 'document',
markerColor: 'orange',
iconColor: 'black'
})
}).addTo(map);
L.marker([51.936063, 4.502077], {
icon: L.AwesomeMarkers.icon({
icon: 'map',
markerColor: 'purple',
iconColor: '#6b1d5c'
})
}).addTo(map);
L.marker([51.932835, 4.506969], {
icon: L.AwesomeMarkers.icon({
icon: 'star',
markerColor: 'green'
})
}).addTo(map);
L.marker([51.930295, 4.515209], {
icon: L.AwesomeMarkers.icon({
icon: 'heart',
markerColor: 'blue'
})
}).addTo(map);
L.marker([51.930083, 4.507742], {
icon: L.AwesomeMarkers.icon({
icon: 'flag',
markerColor: 'cadetblue'
})
}).addTo(map);