Template:Icon link inline: Difference between revisions

From Unofficial Homecoming Wiki
Jump to navigation Jump to search
m (limit clickable width)
m (alignment adjustment)
 
(19 intermediate revisions by 2 users not shown)
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="display: block; padding-left: {{#expr:{{{width|{{{size|22}}}}}}+4}}px; min-height: {{#ifexpr:{{{size|22}}}>30|30|{{{size|22}}}}}px; max-width: max-content;">{{{text|{{{link}}}}}}</span>]]</span></includeonly><noinclude>{{Documentation}}</noinclude>
<includeonly><!--
--><span style="position: relative; {{#if:{{{width|}}}|padding-left: {{#expr:({{{width}}} - {{{size|22}}} * {{#if:{{{icon2|}}}|2|1}}) / 2}}px;}} white-space: nowrap;"><!--
 
    --><span style="position: absolute; top: -2px; pointer-events: none;"><!--
        -->[[File:{{{icon}}}|{{{size|22}}}px|top|link=|alt=]]<!--
        -->{{#if:{{{icon2|}}}|<!--
            -->[[File:{{{icon2}}}|{{{size|22}}}px|top|link=|alt=]]<!--
        -->}}<!--
    --></span><!--
 
    -->[[{{{link}}}|<!--
        --><span style="display: inline-block; vertical-align: top; padding-left: {{#expr:{{#if:{{{width|}}}|{{{size|22}}} * {{#if:{{{icon2|}}}|2|1}} / 2 + {{{width}}} / 2|{{{size|22}}} * {{#if:{{{icon2|}}}|2|1}}}} + 4}}px; white-space: normal; text-decoration: inherit;"><!--
            -->{{{text|{{{link}}}}}}<!--
        --></span><!--
    -->]]<!--
 
--></span></includeonly><noinclude>{{Documentation}}</noinclude>

Latest revision as of 16:14, 2 October 2023

[edit] [purge] 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
}}

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
}}

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
}}