Template
Iconed text
From Dogcraft Wiki
(Created template) |
mNo edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
This template adds an icon image next to a short bit of text. Used as a parent template for several other templates, such as {{tt|NTN}}. | This template adds an icon image next to a short bit of text. Used as a parent template for several other templates, such as {{tt|NTN}}. | ||
<div class="mw-collapsible mw-collapsed"> | |||
=== Syntax === | === Syntax === | ||
{{ | <div class="mw-collapsible-content">{{Template journal|iconed text|icon source|text|icon style (optional)|style{{=}}additional css styles (optional)|faStyle{{=}}FontAwesome icon style (optional)|faColor{{=}}FontAwesome icon color (optional)|faCssStyle{{=}}additional css styles for an FA icon (optional)}} | ||
The first 2 unnamed parameters must be specified, while a third one is optional. | The first 2 unnamed parameters must be specified, while a third one is optional. | ||
Line 24: | Line 25: | ||
* {{para|faColor}}, which sets a FontAwesome icon's own color. This accepts any valid CSS color value (eg. html color names such as "red", hex values like "#000000", etc.) | * {{para|faColor}}, which sets a FontAwesome icon's own color. This accepts any valid CSS color value (eg. html color names such as "red", hex values like "#000000", etc.) | ||
* {{para|faCssStyle}}, which can set additional inline css styles on the {{t|fa}} template. (Not this one, use {{para|style}} for that!) | * {{para|faCssStyle}}, which can set additional inline css styles on the {{t|fa}} template. (Not this one, use {{para|style}} for that!) | ||
</div></div> | |||
===Example=== | ===Example=== | ||
Line 98: | Line 100: | ||
"format": "inline" | "format": "inline" | ||
} | } | ||
</templatedata> | </templatedata>__NOTOC__ | ||
</noinclude> | </noinclude> |
Latest revision as of 00:48, 3 August 2024
Iconed text template
This template adds an icon image next to a short bit of text. Used as a parent template for several other templates, such as {{NTN}}.
Syntax
| icon source
| text
| icon style (optional)
| style=additional css styles (optional)
| faStyle=FontAwesome icon style (optional)
| faColor=FontAwesome icon color (optional)
| faCssStyle=additional css styles for an FA icon (optional)
}}
The first 2 unnamed parameters must be specified, while a third one is optional.
- The first parameter serves as the icon's source, by default the name and extension of a file stored on the wiki
- The second parameter is the text to display next to the icon
The third unnamed parameter can be specified to set the icon's style. This is by default an image stored on the wiki, but the template can also use FontAwesome icons (using the {{fa}} template) or an external image using mw:inline linking. The external image method is widely used on the wiki by the {{Player}} template.
There are several more optional parameters:
|style=
, which can be used to set further inline css styles on this template|faStyle=
, which can be used to set a FontAwesome icon's own style. This defaults to "solid", but also accepts "regular" or "brands". (See the Template:Fa page for more information.)|faColor=
, which sets a FontAwesome icon's own color. This accepts any valid CSS color value (eg. html color names such as "red", hex values like "#000000", etc.)|faCssStyle=
, which can set additional inline css styles on the {{fa}} template. (Not this one, use|style=
for that!)
Example
Using a file hosted on the wiki
{{Iconed text|Rail.png|An image of a rail item}}
generates: An image of a rail item{{Iconed text|Rail.png|An image of a rail item|file}}
generates: An image of a rail item{{Iconed text|Rail.png|An image of a rail item|image}}
generates: An image of a rail item
Using a FontAwesome icon
{{Iconed text|cat|An image of a cat|icon}}
generates: An image of a cat{{Iconed text|cat|An image of a cat|fa}}
generates: An image of a cat{{Iconed text|discord|The discord logo|fa|faStyle=brands}}
generates: The discord logo{{Iconed text|sun|An orange sun|fa|faStyle=regular|faColor=orangered}}
generates: An orange sun
Using an external link
External links must end in .png, .jpg or another file extension. (It must directly link to an image resource)
{{Iconed text|https://minotar.net/helm/MHF_Steve/20.png|''Steve''|external}}
generates: Steve
Template Data
This template adds an icon image next to a short bit of text. Used as a parent template for several other templates, such as {{NTN}}, directly using it is uncommon.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Icon source | 1 | This is the text to display next to the icon
| File | required |
Text | 2 | This is the text to display next to the icon
| String | required |
Style | 3 | The icon's style. Optional and can be left blank, defaults to a file hosted on the wiki. Also accepts "fa" or "icon" for specifying a FontAwesome icon, or "link" or "external" for using an external link.
| String | suggested |
Css style | style | Can be used to optionally set further inline styles on this template.
| String | optional |
FontAwesome icon style | faStyle | Can be used to set a FontAwesome icon's own style. This defaults to "solid", but also accepts "regular" or "brands". (See the Template:Fa page for more information.)
| String | optional |
FontAwesome icon color | faColor | Sets a FontAwesome icon's own color. This accepts any valid CSS color value (eg. html color names such as "red", hex values like "#000000", etc.)
| String | optional |
FontAwesome icon css style | faCssStyle | Can set additional inline css styles on the {{fa}} template. (Not this one, use the base style parameter for that!)
| String | optional |