Template:Icon link inline: Difference between revisions
Jump to navigation
Jump to search
(inline not block) |
(fix for wrapping and hover underline) |
||
| Line 1: | Line 1: | ||
<includeonly><span style="position: relative;"><span style="position: absolute; {{#if:{{{width|}}}|left: {{#expr:({{{width}}} - {{{size|22}}}) / 2}}px;}} pointer-events: none;">[[File:{{{icon}}}|{{{size|22}}}px|link=|alt=]]</span>[[{{{link}}}|<span style="padding-left: {{#expr:{{{width|{{{size|22}}}}}}+4}}px;">{{{text|{{{link}}}}}}</span>]]</span></includeonly><noinclude>{{Documentation}}</noinclude> | <includeonly><span style="position: relative;"><span style="position: absolute; {{#if:{{{width|}}}|left: {{#expr:({{{width}}} - {{{size|22}}}) / 2}}px;}} pointer-events: none;">[[File:{{{icon}}}|{{{size|22}}}px|link=|alt=]]</span>[[{{{link}}}|<span style="display: inline-block; padding-left: {{#expr:{{{width|{{{size|22}}}}}}+4}}px; text-decoration: inherit;">{{{text|{{{link}}}}}}</span>]]</span></includeonly><noinclude>{{Documentation}}</noinclude> | ||
Revision as of 14:30, 2 May 2022
[edit] [] Documentation
Displays an inline icon and text link. The icon and text are combined as a single tap target.
Parameters
- icon
- Required. Filename of icon to display.
- icon2
- Optional. Filename of second icon to display. Default: No second icon displayed.
- size
- Optional. Width of each icon, in pixels. Avoid icon heights larger than the text's line height, usually 22px. Default: 22.
- width
- Optional. Width of space that icon(s) will be centered in. Used for aligning icons of different widths. Default: Same as size parameter, or double size parameter if icon2 is given.
- link
- Required. Page to link to.
- text
- Optional. Text to display. Default: Same as link parameter.
Examples
Basic use
{{icon link inline
| icon = IO Accurate Defense Debuff.png
| link = :Category:Sets for improving Accurate Defense Debuff
| text = Accurate Defense Debuff
}}
Two icons, one link
{{icon link inline
| icon = Badge event spectral.png
| icon2 = Badge event corsair.png
| link = Clothes Horse Badge
| text = Clothes Horse
}}
Aligning icons of different widths
* {{icon link inline
| icon = Badge DayJob CareGiver.png
| link = Caregiver Badge
| size = 20
| width = 31
| text = Caregiver
}}
* {{icon link inline
| icon = Badge DayJob Scholar.png
| link = Professor Badge
| size = 20
| width = 31
| text = Professor
}}
* {{icon link inline
| icon = Badge DayJobAcc Doctor.png
| link = Physician Badge
| size = 31
| text = Physician
}}
