Template:IconText: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<includeonly>{{trim| {{#lvardef: icon | {{{1}}} }} {{#lvardef: link | {{{link|}}} }} {{#lvardef: text | {{{2}}} }} {{#lvardef: min-w | {{{w | {{{size | 40}}} }}} }} {{#lvardef: max-w | {{{w|}}} }} {{#lvardef: max-h | {{{h | {{{size | 40}}} }}} }} }}{{#if: {{{block|}}} | <span style="display: inline-flex; align-items: center; {{#if: {{{gap|}}} | gap: {{{gap}}}px; }}"> }}<span style=" display: inline-flex; align-items: center; justify-content: center; min-width: {{...") |
No edit summary |
||
| Line 10: | Line 10: | ||
}}<span style=" | }}<span style=" | ||
display: inline-flex; | display: inline-flex; | ||
vertical-align: middle; | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
| Line 30: | Line 31: | ||
Result: {{IconText | Flourish Icon.png | Flourish }} | Result: {{IconText | Flourish Icon.png | Flourish }} | ||
The | The icon and text can be made into a link: | ||
Usage: {{code|<nowiki>{{IconText | Flourish Icon.png | link = Flourish | Usage: {{code|<nowiki>{{IconText | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>}} | ||
Result: {{IconText | Flourish Icon.png | link = Flourish | Result: {{IconText | Flourish Icon.png | Custom Text | link = Flourish }} | ||
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. | ||
| Line 44: | Line 45: | ||
Result: {{IconText | size = 25 | Flourish Icon.png | Flourish }} | Result: {{IconText | size = 25 | Flourish Icon.png | Flourish }} | ||
Usage: {{code|<nowiki>{{IconText | size = 25 | Flourish Icon.png | Usage: {{code|<nowiki>{{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }}</nowiki>}} | ||
Result: {{IconText | size = 25 | Flourish Icon.png | Result: {{IconText | size = 25 | Flourish Icon.png | Custom Text | link = Flourish }} | ||
Behavior on missing icon: | Behavior on missing icon: | ||
{{IconText | Missing Icon 123.png | Flourish | {{IconText | Missing Icon 123.png | Flourish | size = 30 }} | ||
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. | ||