Usages

Learn how to use icons by using templates and shortcodes.

Use Icons via Templates

1{{ $ctx := dict
2  "vendor" "bootstrap"
3  "name" "house"
4}}
5{{ partial "icons/icon" $ctx }}

Parameters

vendor

NameContextTypeRequiredDefaultSince
vendor-string--

The vendor name of icons.

name

NameContextTypeRequiredDefaultSince
name-string--

The icon name.

size

NameContextTypeRequiredDefaultSince
size-string-1em-

The square icon size.

height

NameContextTypeRequiredDefaultSince
height-string-1em-

The height of icon.

width

NameContextTypeRequiredDefaultSince
width-string-1em-

The width of icon.

className

NameContextTypeRequiredDefaultSince
className-string---

The additional CSS class names of <svg> element.

color

NameContextTypeRequiredDefaultSince
color-string---

The color of icon, e.g. blue, red, #FF438A.

Use Icons via Shortcode

Both of ico and icons/icon are valid.

Parameters

vendor

PositionNameTypeRequiredDefaultSince
#0vendorstring--

The vendor name of icons.

name

PositionNameTypeRequiredDefaultSince
#1namestring--

The icon name.

size

PositionNameTypeRequiredDefaultSince
#2sizestring-1em-

The square icon size.

height

PositionNameTypeRequiredDefaultSince
-heightstring-1em-

The height of icon.

width

PositionNameTypeRequiredDefaultSince
-widthstring-1em-

The width of icon.

className

PositionNameTypeRequiredDefaultSince
-classNamestring---

The additional CSS class names of <svg> element.

color

PositionNameTypeRequiredDefaultSince
-colorstring---

The color of icon, e.g. blue, red, #FF438A.

Icons Shortcode Examples

Icon With Default Settings

1{{< ico bootstrap house >}}

Icon With Custom Color

1{{< icons/icon vendor=bootstrap name=exclamation-circle color=red >}}

Icon With Custom Class Name

1{{< icons/icon vendor=bootstrap name=check-circle className="text-success" >}}

Icon With Custom Size

1{{< icons/icon vendor=bootstrap name=plus-circle size=3em >}}