Icon

The icon shortcode displays icons using the Font Awesome library.

Usage

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

{{% icon "heart" %}}
{{% icon "skull-crossbones" "blue" %}}
{{% icon %}}
{{% icon "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	Position	Default	Notes
icon	1	<empty>	Font Awesome icon name to be displayed. It will be displayed in the text color of its according context.
style	2	<empty>	The style scheme used for the icon. - by severity: `caution`, `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`, `action`, `inline` You can also define your own styles.
color		<empty>	The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default. - for severity styles: a nice matching color for the severity - for all other styles: the corresponding color

Finding an icon

Browse through the available icons in the Font Awesome Gallery. Notice that the free filter is enabled, as only the free icons are available by default.

Once on the Font Awesome page for a specific icon, for example the page for the heart, copy the icon name and paste into the Markdown content.

Customizing Icons

Font Awesome provides many ways to modify the icon

Change color (by default the icon will inherit the parent color)
Increase or decrease size
Rotate
Combine with other icons

Check the full documentation on web fonts with CSS for more.

Examples

Standard Usage

Built with {{% icon icon="heart" %}} by Relearn and Hugo

Built with {{% icon "heart" %}} by Relearn and Hugo

Built with {{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "heart"
)}} by Relearn and Hugo

Built with by Relearn and Hugo

With Color

Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo

Built with {{% icon "heart" "red" %}} by Relearn and Hugo

Built with {{ partial "shortcodes/icon.html" (dict
  "page" .
  "icon" "heart"
  "style" "red"
)}} by Relearn and Hugo

Built with by Relearn and Hugo

Advanced HTML Usage

While the shortcode simplifies using standard icons, the icon customization and other advanced features of the Font Awesome library require you to use HTML directly. Paste the <i> HTML into markup, and Font Awesome will load the relevant icon.

Built with <i class="fas fa-heart"></i> by Relearn and Hugo

Built with by Relearn and Hugo

To use these native HTML elements in your Markdown, add this in your hugo.toml:

[markup.goldmark.renderer]
  unsafe = true

Style

By Severity

{{% icon style="caution" %}}
{{% icon style="important" %}}
{{% icon style="info" %}}
{{% icon style="note" %}}
{{% icon style="tip" %}}
{{% icon style="warning" %}}

{{% icon %}}
{{% icon %}}
{{% icon %}}
{{% icon %}}
{{% icon %}}
{{% icon %}}

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

{{% icon icon="bullhorn" style="primary" %}}
{{% icon icon="bullhorn" style="secondary" %}}
{{% icon icon="bullhorn" style="accent" %}}

{{% icon "bullhorn" "primary" %}}
{{% icon "bullhorn" "secondary" %}}
{{% icon "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

{{% icon icon="palette" style="blue" %}}
{{% icon icon="palette" style="cyan" %}}
{{% icon icon="palette" style="green" %}}
{{% icon icon="palette" style="grey" %}}
{{% icon icon="palette" style="magenta" %}}
{{% icon icon="palette" style="orange" %}}
{{% icon icon="palette" style="red" %}}

{{% icon "palette" "blue" %}}
{{% icon "palette" "cyan" %}}
{{% icon "palette" "green" %}}
{{% icon "palette" "grey" %}}
{{% icon "palette" "magenta" %}}
{{% icon "palette" "orange" %}}
{{% icon "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

{{% icon icon="palette" style="default" %}}
{{% icon icon="palette" style="transparent" %}}
{{% icon icon="palette" style="code" %}}
{{% icon icon="palette" style="link" %}}
{{% icon icon="palette" style="action" %}}
{{% icon icon="palette" style="inline" %}}

{{% icon "palette" "default" %}}
{{% icon "palette" "transparent" %}}
{{% icon "palette" "code" %}}
{{% icon "palette" "link" %}}
{{% icon "palette" "action" %}}
{{% icon "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"
)}}