Template:Icon text

Template documentation

Displays an icon with text.

Usage

The default size is x40px meaning the icon is scaled until the height is 40 px. It's usually important to limit the height since the icons are used inline, and a very high inline image makes for an unpleasant text layout.

Icon Size

The width can be set via the w parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the "D&D 5th edition rules" table on the desktop Main Page. This also uses the block and gap parameters. See Template:Main page desktop for source.

Blocks

Setting block to yes ensures that if the text part has to break into multiple lines, the second line doesn't flow under the icon and instead the text is constrained into a rectangular block. The gap parameter can only be provided if block is set to yes, and determines the gap (in px) between the icon and the aforementioned rectangular text block.

Examples

Example

Markup

Renders as

Default

{{icon text | Flourish Icon.png | Flourish }}

Flourish

With link

{{icon text | Flourish Icon.png | Custom Text | link = Flourish }}

Custom Text

Adjusting size & font size

{{icon text | size = 25 | font size = 80% | Flourish Icon.png | Flourish }}

Flourish

With size, font size, and link

{{icon text | size = 25 | font size = 80% | Flourish Icon.png | Custom Text | link = Flourish }}

Custom Text

Missing icon

{{icon text | Missing Icon 123.png | Flourish | size = 30 }}

Flourish Flourish

Main Page excerpt

{| class="wikitable" style="max-width: 500px;"
! colspan="2" | Rolls
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | D4_Physical.png | Initiative }}
| The roll you make to determine when it will be your turn at start of combat.
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | D20.png | Attack roll }}
| The roll you make to determine whether an attack hits an enemy at all.
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | D6 Thunder.png | Damage roll }}
| The roll you make to determine the amount of damage done by a successful attack.
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | Saving Throw Icon.png | Saving throw }}
| The roll you make to attempt avoiding various threats other than direct attacks.
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | D20.png | Ability check }}
| The roll you make when attempting anything else that requires a roll to succeed.
|-
! colspan="2" | Modifiers
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | Advantage_Icon.png | Advantage }}
| Roll the dice twice, and use the higher result. [[Disadvantage]] is the exact opposite. 
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | Charisma Score Icon.png | Ability score modifier }}
| The number you add to your rolls based on your [[Ability scores|ability scores]].
|-
| {{IconLink | block = yes | w = 22 | h = 22 | gap = 2 | Proficiency Icon.png | Proficiency bonus }}
| The number you add to your rolls based on whether you have [[Proficiency|proficiency]].
|}

Rolls
Initiative	The roll you make to determine when it will be your turn at start of combat.
Attack roll	The roll you make to determine whether an attack hits an enemy at all.
Damage roll	The roll you make to determine the amount of damage done by a successful attack.
Saving throw	The roll you make to attempt avoiding various threats other than direct attacks.
Ability check	The roll you make when attempting anything else that requires a roll to succeed.
Modifiers
Advantage	Roll the dice twice, and use the higher result. Disadvantage is the exact opposite.
Ability score modifier	The number you add to your rolls based on your ability scores.
Proficiency bonus	The number you add to your rolls based on whether you have proficiency.

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Icon	`1`	File to use for the icon, without File: prefix. Example Blah blub.webp	File	required
Text	`2`	Text to show next to the icon. Example Blah blub	Content	required
Link	`link`	Optional link, for both icon and text.	Page name	optional
Size	`size`	Preferred size of icon; shortcut for setting w and h to the same value.	Number	optional
Width	`w`	Maximum width of icon, or exact width if 'block' is set.	Number	optional
Height	`h`	Maximum height of icon.	Number	optional
Block	`block`	Whether to wrap the icon and text in a containing HTML element and use 'inline-flex' to align the icon and text.	String	optional
Gap	`gap`	If 'block' is set, the exact gap to use between the icon and text.	Number	optional
Nowrap	`nowrap`	Whether to use 'white-space: nowrap' to prevent line breaks; not needed if 'block' is set.	String	optional
Class	`class`	CSS class to add to the icon.	String	optional
Separator	`separator`	What to put between the icon and text. Default is an NBSP.	Content	optional
Font size	`font size`	Font size to use for text.	Number	optional