Template

Iconed text

From Dogcraft Wiki

No edit summary
mNo edit summary
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 ===
{{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)}}
<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>


===Example===
===Example===
Line 98: Line 100:
"format": "inline"
"format": "inline"
}
}
</templatedata>
</templatedata>__NOTOC__
</noinclude>
</noinclude>

Revision as of 00:47, 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

{{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 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 An image of a rail item
  • {{Iconed text|Rail.png|An image of a rail item|file}} generates: An image of a rail item An image of a rail item
  • {{Iconed text|Rail.png|An image of a rail item|image}} generates: An image of a rail item 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: 20.png 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.

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Icon source1

This is the text to display next to the icon

Example
Rail.png
Filerequired
Text2

This is the text to display next to the icon

Example
The image of a rail item
Stringrequired
Style3

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.

Default
file
Example
external
Stringsuggested
Css stylestyle

Can be used to optionally set further inline styles on this template.

Example
font-size: 25px;
Stringoptional
FontAwesome icon stylefaStyle

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.)

Default
solid
Example
brands
Stringoptional
FontAwesome icon colorfaColor

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.)

Example
orangered or #ff0000
Stringoptional
FontAwesome icon css stylefaCssStyle

Can set additional inline css styles on the {{fa}} template. (Not this one, use the base style parameter for that!)

Example
font-size: small;
Stringoptional
This page was last modified on 3 August 2024, at 00:47. (3 months ago)
Background Takeshi by Edo