Usages
Learn how to use icons by using templates and shortcodes.
On this page
Donate
Use Icons via Templates
1{{ $ctx := dict
2 "vendor" "bootstrap"
3 "name" "house"
4}}
5{{ partial "icons/icon" $ctx }}
Parameters
vendor
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
vendor | string | ✓ | - | - |
The vendor name of icons.
name
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
name | string | ✓ | - | - |
The icon name.
size
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
size | string | - | 1em | - |
The square icon size.
height
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
height | string | - | 1em | - |
The height of icon.
width
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
width | string | - | 1em | - |
The width of icon.
className
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
className | string | - | - | - |
The additional CSS class names of <svg> element.
color
| Name | Type | Required | Default | Since |
|---|---|---|---|---|
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 |
|---|---|---|---|---|---|
#0 | vendor | string | ✓ | - | - |
The vendor name of icons.
name
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
#1 | name | string | ✓ | - | - |
The icon name.
size
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
#2 | size | string | - | 1em | - |
The square icon size.
height
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | height | string | - | 1em | - |
The height of icon.
width
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | width | string | - | 1em | - |
The width of icon.
className
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | className | string | - | - | - |
The additional CSS class names of <svg> element.
color
| Position | Name | Type | Required | Default | Since |
|---|---|---|---|---|---|
| - | color | string | - | - | - |
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 >}}