From 3b235f2bd7b550c114ad9d8d640ba3b153de99a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at> Date: Fri, 26 Jan 2018 20:22:04 +0100 Subject: [PATCH] Docu: improve icons documentation --- doc/Icons.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/doc/Icons.md b/doc/Icons.md index 5e4d1063..b6a402c8 100644 --- a/doc/Icons.md +++ b/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&fill=red&stroke=black&stroke-width=0.5"> ```