Template:IconText: Difference between revisions
Jump to navigation
Jump to search
HiddenDragon (talk | contribs) Fixed unclosed tag |
HiddenDragon (talk | contribs) Use template demo |
||
| Line 28: | Line 28: | ||
| </span> | | </span> | ||
| {{#if: {{{nowrap|}}}|</span>}} | | {{#if: {{{nowrap|}}}|</span>}} | ||
}}</includeonly><noinclude> | }}</includeonly><noinclude>{{Documentation|content= | ||
Displays an icon with text. | |||
== Usage == | |||
The default size is {{code|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. | The default size is {{code|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 {{code|w}} parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation. This also uses the {{code|block}} and {{code|gap}} parameters. (View the source of this page for usage.) | The width can be set via the {{code|w}} parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation. This also uses the {{code|block}} and {{code|gap}} parameters. (View the source of this page for usage.) | ||
=== Blocks === | |||
Setting {{code|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 {{code|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. | Setting {{code|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 {{code|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 == | |||
{{Template demo | |||
| style = table | |||
| caption 1 = Default | |||
| <nowiki>{{IconText | Flourish Icon.png | Flourish }}</nowiki> | |||
| caption 2 = With link | |||
| <nowiki>{{IconText | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki> | |||
| caption 3 = Adjusting size | |||
| <nowiki>{{IconText | size = 25 | Flourish Icon.png | Flourish }}</nowiki> | |||
| caption 4 = With size and link | |||
| <nowiki>{{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki> | |||
| caption 5 = Missing icon | |||
| <nowiki>{{IconText | Missing Icon 123.png | Flourish | size = 30 }}</nowiki> | |||
}} | |||
=== Complete example === | |||
{| class="wikitable" style="width: 50%;" | {| class="wikitable" style="width: 50%;" | ||
! colspan="2" | Rolls | ! colspan="2" | Rolls | ||
| Line 86: | Line 83: | ||
|} | |} | ||
}} | |||
[[Category:Templates]] | |||
[[Category:Icon templates]] | [[Category:Icon templates]] | ||
</noinclude> | </noinclude> | ||
Revision as of 12:22, 19 January 2025
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 following table shown on our main page as of the writing of this documentation. This also uses the block and gap parameters. (View the source of this page for usage.)
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 | {{IconText | Flourish Icon.png | Flourish }} |  |
| With link | {{IconText | Flourish Icon.png | Custom Text | link = Flourish }} | |
| Adjusting size | {{IconText | size = 25 | Flourish Icon.png | Flourish }} |  |
| With size and link | {{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }} | |
| Missing icon | {{IconText | Missing Icon 123.png | Flourish | size = 30 }} |
Complete example
{