Leaflet.Icon.Glyph
Allows you to put glyphs from icon fonts into your LeafletJS markers.
This is very similar to other LeafletJS plugins such as AwesomeMarkers or MakiMarkers. The main difference is that Leaflet.Icon.Glyph does not need any CSS to be set up, and should work with any bootstrap-style icon fonts.
This means hundreds of glyphs at your disposal.
Demo
Live demo at https://leaflet.github.io/Leaflet.Icon.Glyph/demo.html
The demo shows:
- Plain glyphs (iconless)
- Material design icons
- Glyphicons-halflings from Bootstrap
- Font Awesome
- Metro UI icon font
- Github's Octicons
- Iconic Open
- Mapkey Icons
Usage
Load the script (alongside whatever icon fonts you need):
Then, if your icon glyphs look like this in HTML:
Instantiate the marker icons like this in your Javascript+Leaflet code:
var marker = L;
If you want to show a glyph from a "normal" font (e.g. an "A"), just set an empty prefix:
var marker = L;
The demo page shows how to use a few different icon typefaces and plain glyphs, check it out for inspiration!
Options
An instance of L.Icon.Glyph
supports the options of L.Icon
, plus:
var icon = Licon;
Subclassing
If you're using a set of font icons extensively, or a custom icon image, it might
be easier to subclass L.Icon.Glyph
into your own icon class:
LIconGlyphMDI = LIconGlyph; // FactoryLiconglyph { return options; }; var marker = L;
Legalese
"THE BEER-WARE LICENSE": ivan@sanchezortega.es wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.