Colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons

Version 2.0 of Leaflet.awesome-markers is tested with:

• Bootstrap 3
• Font Awesome 4.0
• Ionicons 1.5.2
• Leaflet 0.5-Latest

For bootstrap 2.x & Fontawesome 3.x use Leaflet.awesome-markers v1.0

JSfiddle demo

This plugin depends on either Bootstrap or Font-Awesome for the rendering of the icons. See these urls for more information:

For Font-Awesome

• http://fortawesome.github.com/Font-Awesome/
• http://fortawesome.github.com/Font-Awesome/#integration

For Twitter bootstrap:

• http://twitter.github.com/bootstrap/

For Ionicons:

• http://ionicons.com

• 1. First, follow the steps for including Font-Awesome or Twitter bootstrap or Ionicons into your application.

For Font-Awesome, steps are located here:

http://fortawesome.github.io/Font-Awesome/get-started/

For Twitter bootstrap, steps are here:

http://getbootstrap.com/getting-started/

For Ionicons:

Add the ionicon stylesheet from a CDN or download ionicons.

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">

• 2. Next, copy the dist/images directory, awesome-markers.css, and awesome-markers.js to your project and include them:

<link rel="stylesheet" href="css/leaflet.awesome-markers.css">

<script src="js/leaflet.awesome-markers.js"></script>

• 3. Now use the plugin to create a marker like this:

  // Creates a red marker with the coffee icon
  var redMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
  });
      
  L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

The 'icon' property supports these strings:

• 'home'
• 'glass'
• 'flag'
• 'star'
• 'bookmark'
• .... and many more, see: http://fortawesome.github.io/Font-Awesome/icons/
• Or: http://getbootstrap.com/components/#glyphicons
• Or: http://ionicons.com

Tweak size and positioning of the icons:

    .awesome-marker i {
        font-size: 18px;
        margin-top: 8px;
    }

Set default prefix to something other than glypicon

    L.AwesomeMarkers.Icon.prototype.options.prefix = 'ion';

See JSFIddle

• Leaflet.AwesomeMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html.
• Font Awesome: http://fortawesome.github.io/Font-Awesome/license/
• Twitter Bootstrap: http://getbootstrap.com/

Check out Color Gradient, a tool for creating CSS Gradients.