NIK220V: Created page with "{{Documentation header}} This template creates a bar made of icons.

{{iconbar |value= |title= |size= |full= |half= |empty= |reverse= |total= |offset= }}

{| class="wikitable" ! Parameter ! Function ! Default value |- | value | Integer value between 0 and 20. One "full" icon is shown for each increase of 2 to value (e.g. three are shown if value is 6 or 7, etc.), and if value is odd, a "h..."

2026-03-09T15:44:03Z

Created page with "{{Documentation header}} This template creates a bar made of icons. <pre style="width: 100px">{{iconbar |value= |title= |size= |full= |half= |empty= |reverse= |total= |offset= }}</pre> {| class="wikitable" ! Parameter ! Function ! Default value |- | <code>value</code> | Integer value between 0 and 20. One "full" icon is shown for each increase of 2 to <code>value</code> (e.g. three are shown if <code>value</code> is 6 or 7, etc.), and if <code>value</code> is odd, a "h..."

New page

{{Documentation header}}
This template creates a bar made of icons.

<pre style="width: 100px">{{iconbar
|value=
|title=
|size=
|full=
|half=
|empty=
|reverse=
|total=
|offset=
}}</pre>

{| class="wikitable"
! Parameter
! Function
! Default value
|-
| <code>value</code>
| Integer value between 0 and 20. One "full" icon is shown for each increase of 2 to <code>value</code> (e.g. three are shown if <code>value</code> is 6 or 7, etc.), and if <code>value</code> is odd, a "half" icon is shown at the end of the bar.
| 0
|-
| <code>title</code>
| Mouseover text. If this parameter isn't specified, it falls back to <code>value</code>.
| ''None''
|-
| <code>size</code>
| Width of each icon in CSS units like "px" or "em". Units default to "px".
| ''None''
|-
| <code>full</code>
| "Full" icon. One of these is shown for each increase of 2 to <code>value</code> (e.g. three are shown if <code>value</code> is 6 or 7, etc.).
| ''None''
|-
| <code>half</code>
| "Half" icon, used at the end of the bar if <code>value</code> is odd.
| ''None''
|-
| <code>empty</code>
| "Empty" icon, used if <code>value</code> is 0 or if <code>total</code> is used and is higher than <code>value</code>.
| ''None''
|-
| <code>reverse</code>
| Pass a value to display the "half" icon on the left end of the bar instead of the right.
| ''None''
|-
| <code>total</code>
| Minimum number of icons to be shown. If <code>value</code> is lower than this, empty icons are shown to reach the minimum.
| ''None''
|-
| <code>offset</code>
| Offset between the icons. Negative values will overlap the icons.
| <code>-(size/9)</code>
|}

== Examples ==
*4/10 HP <pre>{{iconbar|value=4|title=|size=|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}</pre>
:{{iconbar|value=4|title=|size=|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}
*4/10 HP large <pre>{{iconbar|value=4|title=|size=18px|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}</pre>
:{{iconbar|value=4|title=|size=18px|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}
*5/10 HP with title <pre>{{iconbar|value=5|title=Lorem ipsum|size=|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}</pre>
:{{iconbar|value=5|title=Lorem ipsum|size=|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10}}
*5/10 HP mob reversed with title <pre>{{iconbar|value=5|title=Lorem ipsum|size=|full=Mob Heart.png|half=Mob Half Heart.png|empty=Empty Heart.png|reverse=yess|total=10}}</pre>
:{{iconbar|value=5|title=Lorem ipsum|size=|full=Mob Heart.png|half=Mob Half Heart.png|empty=Empty Heart.png|reverse=yess|total=10}}
*4/10 HP large with offset between them <pre>{{iconbar|value=4|title=|size=18px|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10|offset=5px}}</pre>
:{{iconbar|value=4|title=|size=18px|full=Heart.png|half=Half Heart.png|empty=Empty Heart.png|reverse=|total=10|offset=5px}}

Template:Iconbar/doc - Revision history