Browse Source

Docu: improve icons documentation

master
parent
commit
3b235f2bd7
  1. 18
      doc/Icons.md

18
doc/Icons.md

@ -1,3 +1,19 @@
#### Unicode Icons
Unicode defines many icons which can be used either directly or via their HTML codes, e.g.:
```html
🎂 🎂 🎂
```
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:
```html
<img src='img/foobar.svg'>
```
This will include the image from your repository (when uploaded to your 'img' directory).
#### Font Awesome Icons
Font Awesome 4 is included in OpenStreetBrowser, therefore you can use, e.g.:
```html
@ -20,7 +36,7 @@ This will include the park-15.svg icon. Mapbox Maki icons come in two sizes: 11
<img src="maki:park?size=11">
```
You can pass SVG options to the icon to modify its look. Note that every icon is a path:
You can pass URL options to the icon to modify its look. Note that every icon is a [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) and all [style options](https://developer.mozilla.org/de/docs/Web/SVG/Tutorial/Fills_and_Strokes) are available:
```html
<img src="maki:park?size=11&amp;fill=red&amp;stroke=black&amp;stroke-width=0.5">
```
Loading…
Cancel
Save