Icon

Th' ay'con shortcode displays ay'cons us'n th' Font Awesome library.

Usage

{{% ay'con ay'con="heart" %}}
{{% ay'con ay'con="skull-crossbones" style="blue" %}}
{{% ay'con style="warning" %}}
{{% ay'con color="blue" ay'con="angle-double-up" %}}

{{% ay'con "heart" %}}
{{% ay'con "skull-crossbones" "blue" %}}
{{% ay'con %}}
{{% ay'con "angle-double-up" %}}

{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "heart"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "skull-crossbones"
  "style" "blue"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "warning"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "color" "blue"
  "icon" "angle-double-up"
)}}

Parameters

Name	Posit'n	Default	Notes
ay'con	1	<empty>	Font Awesome ay'con name t' be displayed. It will be displayed 'n th' text color o' its accord'n context.
style	2	<empty>	Th' style scheme used fer th' ay'con. - by severity: `caut'n`, `important`, `info`, `note`, `tip`, `warning` - by brand color: `primary`, `secondary`, `accent` - by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red` - by special color: `default`, `transparent`, `code`, `link`, `act'n`, `inline` Ye can also define yer own styles.
color		<empty>	Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default. - fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color

Find'n an ay'con

Browse through th' avail'ble ay'cons 'n th' Font Awesome Gallery. Notice that th' free filter be enabled, as only th' free ay'cons be avail'ble by default.

Once on th' Font Awesome plank fer a specific ay'con, fer example th' plank fer th' heart, copy th' ay'con name an' paste into th' Marrrkdown rrrambl'n.

Customiz'n Ay'cons

Font Awesome provides many ways t' modify th' ay'con

Change color (by default th' ay'con will inherit th' parent color)
Increase or decrease size
Rotate
Combine wit' other ay'cons

Check th' full documentat'n on web fonts wit' CSS fer more.

Examples

Standard Usage

Built wit' {{% ay'con ay'con="heart" %}} by Relearrrn an' Cap'n Hugo

Built wit' {{% ay'con "heart" %}} by Relearrrn an' Cap'n Hugo

Built wit' {{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "heart"
)}} by Relearrrn an' Cap'n Hugo

Built wit' by Relearrrn an' Cap'n Hugo

Wit' Color

Built wit' {{% ay'con ay'con="heart" style="red" %}} by Relearrrn an' Cap'n Hugo

Built wit' {{% ay'con "heart" "red" %}} by Relearrrn an' Cap'n Hugo

Built wit' {{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "heart"
  "style" "red"
)}} by Relearrrn an' Cap'n Hugo

Built wit' by Relearrrn an' Cap'n Hugo

Advanced HTML Usage

While th' shortcode simplifies us'n standard ay'cons, th' ay'con customizat'n an' other advanced features o' th' Font Awesome library require ye t' use HTML directly. Paste th' <i> HTML into marrrkup, an' Font Awesome will board th' relevant ay'con.

Built wit' <i class="fas fa-heart"></i> by Relearrrn an' Cap'n Hugo

Built wit' by Relearrrn an' Cap'n Hugo

T' use these native HTML elements 'n yer Marrrkdown, add this 'n yer hugo.toml:

[marrrkup.goldmark.renderer]
  unsafe = true

Style

By Severity

{{% ay'con style="caution" %}}
{{% ay'con style="important" %}}
{{% ay'con style="info" %}}
{{% ay'con style="note" %}}
{{% ay'con style="tip" %}}
{{% ay'con style="warning" %}}

{{% ay'con %}}
{{% ay'con %}}
{{% ay'con %}}
{{% ay'con %}}
{{% ay'con %}}
{{% ay'con %}}

{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "caution"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "important"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "info"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "note"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "tip"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "style" "warning"
)}}

By Brand Colors

{{% ay'con ay'con="bullhorn" style="primary" %}}
{{% ay'con ay'con="bullhorn" style="secondary" %}}
{{% ay'con ay'con="bullhorn" style="accent" %}}

{{% ay'con "bullhorn" "primary" %}}
{{% ay'con "bullhorn" "secondary" %}}
{{% ay'con "bullhorn" "accent" %}}

{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "bullhorn"
  "style" "primary"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "bullhorn"
  "style" "secondary"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "bullhorn"
  "style" "accent"
)}}

By Color

{{% ay'con ay'con="palette" style="blue" %}}
{{% ay'con ay'con="palette" style="cyan" %}}
{{% ay'con ay'con="palette" style="green" %}}
{{% ay'con ay'con="palette" style="grey" %}}
{{% ay'con ay'con="palette" style="magenta" %}}
{{% ay'con ay'con="palette" style="orange" %}}
{{% ay'con ay'con="palette" style="red" %}}

{{% ay'con "palette" "blue" %}}
{{% ay'con "palette" "cyan" %}}
{{% ay'con "palette" "green" %}}
{{% ay'con "palette" "grey" %}}
{{% ay'con "palette" "magenta" %}}
{{% ay'con "palette" "orange" %}}
{{% ay'con "palette" "red" %}}

{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "blue"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "cyan"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "green"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "grey"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "magenta"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "orange"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "red"
)}}

By Special Color

{{% ay'con ay'con="palette" style="default" %}}
{{% ay'con ay'con="palette" style="transparent" %}}
{{% ay'con ay'con="palette" style="code" %}}
{{% ay'con ay'con="palette" style="link" %}}
{{% ay'con ay'con="palette" style="action" %}}
{{% ay'con ay'con="palette" style="inline" %}}

{{% ay'con "palette" "default" %}}
{{% ay'con "palette" "transparent" %}}
{{% ay'con "palette" "code" %}}
{{% ay'con "palette" "link" %}}
{{% ay'con "palette" "action" %}}
{{% ay'con "palette" "inline" %}}

{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "default"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "transparent"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "code"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "link"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "action"
)}}
{{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "palette"
  "style" "inline"
)}}