diff --git a/README.md b/README.md index 93ede1808..762c2f6b5 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,17 @@ # Leaflet.awesome-markers plugin -Colorful iconic markers for Leaflet, based on the Font Awesome icons +Colorful iconic markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons ## Screenshots ![AwesomeMarkers screenshot](https://raw.github.com/lvoogdt/Leaflet.awesome-markers/master/screenshots/screenshot-soft.png "Screenshot of AwesomeMarkers") -### Font-Awesome -This plugin depends on Font-Awesome for the rendering of the icons. The Font-Awesome fonts and CSS classes should be included in the project. See these urls for more information: +### Twitter Bootstrap/Font-Awesome icons +This plugin depends on Bootstrap or Font-Awesome for the rendering of the icons. The Font-Awesome fonts and CSS classes could be included in the project. See these urls for more information: - http://fortawesome.github.com/Font-Awesome/ - http://fortawesome.github.com/Font-Awesome/#integration +Or if you are using bootstrap: +- http://twitter.github.com/bootstrap/ + ## Using the plugin Copy the dist/images directory and css/js files to your project and include them: ````xml @@ -44,14 +47,15 @@ The 'color' property currently supports these strings: ### Supported icons The 'icon' property supports these strings: -- 'coffee' -- 'food' -- 'plane' +- 'home' +- 'glass' +- 'flag' - 'star' -- 'beer' +- 'bookmark' - .... and many more, see: http://fortawesome.github.com/Font-Awesome/#icons-new +- Or: http://twitter.github.com/bootstrap/base-css.html#icons -### Spinning icons +### Spinning icons (only Font-Awesome) You can make any icon spin by setting the spin option to true: ````js // Creates a red marker with the coffee icon @@ -64,6 +68,19 @@ var redMarker = L.AwesomeMarkers.icon({ L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map); ```` +### Color of the icon +By default the icons are white, but you can set the color to black with the iconColor option. 'white' & 'black' are the only ones supported. +````js +// Creates a red marker with the coffee icon +var redMarker = L.AwesomeMarkers.icon({ + icon: 'spinner', + color: 'red', + iconColor: 'black' +}) + +L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map); +```` + ## License - Leaflet.AwesomeMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html. - Font Awesome: http://fortawesome.github.com/Font-Awesome/#license