Fetching contributors…
Cannot retrieve contributors at this time
51 lines (41 sloc) 1.93 KB

Unicode Icons

Unicode defines many icons which can be used either directly or via their HTML codes, e.g.:

🎂 🎂 🎂

A drawback of Unicode icons is, that the display will differ from system to system as they depend on the available Fonts.

Self defined icons

You may upload images to your repository and use them via a relative image link:

<img data-src='img/foobar.svg'>

This will include the image from your repository (when uploaded to your 'img' directory).

Font Awesome Icons

Font Awesome 5 is included in OpenStreetBrowser, therefore you can use, e.g.:

<i class="fas fa-compass" aria-hidden="true"></i> <!-- solid -->
<i class="far fa-compass" aria-hidden="true"></i> <!-- regular -->

You can use normal CSS to modify its look, e.g.

<i style="color: red;" class="fas fa-compass" aria-hidden="true"></i>

Mapbox Maki Icons

Mapbox Maki Icons 5 are also included in OpenStreetBrowser. They can be accessed as images with protocol 'maki', e.g.:

<img data-src="maki:park">

This will include the park-15.svg icon. Mapbox Maki icons come in two sizes: 11 and 15. Default is 15, if you want to use 11 pass the size parameter with value 11:

<img data-src="maki:park?size=11">

You can pass URL options to the icon to modify its look. Note that every icon is a SVG path and all style options are available:

<img data-src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">

Temaki Icons

Temaki icons are additions to the Mapbox Maki Icons with the difference that they only exist in to size of 15px.

<img data-src="temaki:shinto">
<img data-src="temaki:shinto?fill=red">