Template:Icon text/doc
Displays an icon with text.
Usage
The default size is x25px meaning the icon is scaled until the height is 25 px. It's usually important to limit the height, since this template is often used inline, and a too high inline image makes for an unpleasant text layout.
Icon Size
The size can be altered via the w, h, and size parameters. The template passes them through to the underlying {{icon}} template for icon sizing, which uses them to determine what's passed on as a [[File:...]] size parameter. This means the width and height act as upper limits, not absolute values.
However, if the block parameter is enabled, then the w and h also set the minimal width and height of a span, within which the icon will be centered. This is so you can have a set of icon-text elements aligned in a grid, like in lists or tables. See for example the Main Page's "D&D 5th edition rules" table or "Mechanics" list. (Also shown below as examples.)
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.
Enabling this also enforces the w and h as the minimum dimensions of a span within which the icon will be centered.
Spacing
Spacing between items is controlled using either separator or gap.
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.
The separator parameter can only be provided if block is not set, and determines the character to place between the icon and the text. By default, this is   (U+202F NARROW NO-BREAK SPACE) which prevents the icon and the first word from being split from wrapping text. Other characters like ⁠ (zero-width space) and (regular no-break space) may also be used.
Examples
With link
Markup{{icon text | Flourish Icon.png | Custom Text | link = Flourish }} Renders as
Word-ending links
Markup{{icon text | Flourish Icon.png | Custom Text | link = Flourish }}ing Renders asCapping width and height
Markup{{icon text | size = 60 | Advantage Icon.png | Advantage }} Renders as
Missing icon
Markup{{icon text | Missing Icon 123.png | Flourish | size = 30 }} Renders asFlourish
External link
Markup{{icon text | FRWiki Icon.png | FR Wiki | link = https://forgottenrealms.fandom.com/ }} Renders as
Main Page excerpt 1
MarkupRenders as{| class="wikitable" style="max-width: 500px;" ! colspan="2" | Rolls |- | {{icon link | 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. |- | {{icon link | 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. |- | {{icon link | 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. |- | {{icon link | 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. |- | {{icon link | 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 |- | {{icon link | 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. |- | {{icon link | 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]]. |- | {{icon link | 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 | |
|---|---|
 |
The roll you make to determine when it will be your turn at start of combat. |
 |
The roll you make to determine whether an attack hits an enemy at all. |
 |
The roll you make to determine the amount of damage done by a successful attack. |
 |
The roll you make to attempt avoiding various threats other than direct attacks. |
|
The roll you make when attempting anything else that requires a roll to succeed. |
| Modifiers | |
 |
Roll the dice twice, and use the higher result. Disadvantage is the exact opposite. |
 |
The number you add to your rolls based on your ability scores. |
 |
The number you add to your rolls based on whether you have proficiency. |
Main Page excerpt 2
Markup<ul style="list-style: none; column-width: 9em; column-count: 2; width: 500px;">
<li> {{icon link | block=y | w=22 | h=22 | Channel Divinity Charges Icon.png | Resources }} <ul style="list-style: none">
<li> {{icon link | block=y | w=18 | h=22 | Action Icon.png | Action }} </li>
<li> {{icon link | block=y | w=18 | h=22 | Bonus Action Icon.png | Bonus action }} </li>
<li> {{icon link | block=y | w=18 | h=22 | Reaction Icon.png | Reaction }} </li>
</ul></li>
<li> {{icon link | block=y | w=22 | h=22 | Weapon Action.webp | Weapon actions }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Illithid Power Icon.png | Illithid powers }} </li>
<li> {{icon link | block=y | w=22 | h=22 | True Strike Icon.png | Spells | Spellcasting }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Camp Supplies Icon.png | Resting }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Charmed Condition Icon.webp | Conditions }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Alchemy Icon.png | Alchemy }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Bludgeoning Damage Icon.png | Damage types }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Creature AC Icon.png | Armour Class }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Initiative Icon.png | Initiative }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Concentration Icon.png | Concentration }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Eldritch Blast Icon.png | List of all spells | List of spells }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Consumables Icon.png | Consumables }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Ruby Item Icon.png | Miscellaneous }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Volo's Ersatz Eye Item Icon.png | Permanent Bonuses | Perm. bonuses }} </li>
<li> {{icon link | block=y | w=22 | h=22 | Proficiency.png | Proficiency }} </li>
<li> {{icon link | block=y | w=22 | h=22 | D20.png | Inspiration }} </li>
</ul>
Renders as
Template data
No description.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Icon | 1 | File to use for the icon, without File: prefix.
| File | required |
| Text | 2 | Text to show next to the icon.
| 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 narrow non-breaking space. | Content | optional |