Usages
Learn how to use icons by using templates and shortcodes.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Use Icons via Templates
1{{ $ctx := dict
2 "vendor" "bootstrap"
3 "name" "house"
4}}
5{{ partial "icons/icon" $ctx }}
Parameters
vendor
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
vendor | - | string | ✓ | - | - | - |
The vendor name of icons.
name
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
name | - | string | ✓ | - | - | - |
The icon name.
size
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
size | - | string | - | 1em | - | - |
The square icon size.
height
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
height | - | string | - | 1em | - | - |
The height of icon.
width
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
width | - | string | - | 1em | - | - |
The width of icon.
className
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
className | - | string | - | - | - | - |
The additional CSS class names of <svg> element.
color
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
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
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | vendor | string | ✓ | - | - | - |
The vendor name of icons.
name
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#1 | name | string | ✓ | - | - | - |
The icon name.
size
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#2 | size | string | - | 1em | - | - |
The square icon size.
height
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | height | string | - | 1em | - | - |
The height of icon.
width
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | width | string | - | 1em | - | - |
The width of icon.
className
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | className | string | - | - | - | - |
The additional CSS class names of <svg> element.
color
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | color | string | - | - | - | - |
The color of icon, e.g.
blue,
red,
#FF438A.
Icons Shortcode Examples
Icon With Default Settings
Source
1{{< ico bootstrap house >}}Result
Icon With Custom Color
Source
1{{< icons/icon vendor=bootstrap name=exclamation-circle color=red >}}Result
Icon With Custom Class Name
Source
1{{< icons/icon vendor=bootstrap name=check-circle className="text-success" >}}Result
Icon With Custom Size
Source
1{{< icons/icon vendor=bootstrap name=plus-circle size=3em >}}Result