Leaflet.Icon.Glyph

This Leaflet plugin allows you to show glyphs from icon fonts in your map markers.

Check the documentation at https://github.com/IvanSanchez/Leaflet.Icon.Glyph.

Please read the documentation for each icon font (linked from its title) before using it for any serious purpose. The CDNs shown here may not be fit for production purposes.

Material design icons

<link href="https://cdn.materialdesignicons.com/1.3.41/css/materialdesignicons.min.css" rel="stylesheet" type="text/css" />
<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'mdi', glyph: 'school' }) }).addTo(map);
</script>

For some weird reason, Chrome on Android refuses to load the icon font from that CDN. For this reason, consider using another method of hosting these icons if you need them.

Iconless (plain fonts)

If no prefix is specified, then glyphs will be interpreted as plain text. Use the cssClass property to apply some styling (e.g. custom typeface): 

<style/>
.leaflet-marker-icon.sans-serif {
	font-weight: bold;
	font-family: Sans Serif;
}
</style/>

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: '', cssClass:'sans-serif', glyph: 'A' }) }).addTo(map);
</script>

You can use any typeface at all (see https://fontlibrary.org for some open source typefaces you can use, including Xolonoum:) 
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/xolonium" type="text/css"/>

<style/>
.leaflet-marker-icon.xolonium {
	font-weight: bold;
	font-family: Xolonium;
}
</style/>

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: '', cssClass:'xolonium', glyph: 'A' }) }).addTo(map);
</script>

Glyphicons-halflings from Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'glyphicon', glyph: 'adjust' }) }).addTo(map);
</script>

Font Awesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'fas', glyph: 'globe' }) }).addTo(map);
	L.marker([20,20], {icon: L.icon.glyph({ prefix: 'fab', glyph: 'github' }) }).addTo(map);
</script>

Metro UI icon font

<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-icons.min.css">

<!-- This icon font wants to override box shadows for some <div>s for no good reason, so: -->
<style>.leaflet-map-pane div { box-shadow: none; }</style>

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'mif', glyph: 'earth' }) }).addTo(map);
</script>

Elusive

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css">

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'el', glyph: 'heart' }) }).addTo(map);
</script>

The CDN for Elusive Icons is not stable at the time of this writing. Consider hosting the icon font for Elusive yourself.

Github's Octicons

<link rel="stylesheet" href="https://cdn.rawgit.com/github/octicons/master/octicons/octicons.css">

<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'octicon', glyph: 'alert' }) }).addTo(map);
</script>

Iconic Open

<link rel="stylesheet" href="https://cdn.rawgit.com/iconic/open-iconic/master/font/css/open-iconic-bootstrap.css" type="text/css">


<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'oi', glyph: 'infinity' }) }).addTo(map);
</script>

Mapkey Icons

<link rel="stylesheet" href="https://cdn.rawgit.com/mapshakers/mapkeyicons/master/dist/MapkeyIcons.css" type="text/css">


<script>
	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'mki', glyph: 'zoo' }) }).addTo(map);
</script>