用法
学习如何通过模板和短代码使用图标。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
通过模板使用图标
1{{ $ctx := dict
2 "vendor" "bootstrap"
3 "name" "house"
4}}
5{{ partial "icons/icon" $ctx }}
参数
vendor
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
vendor | - | string | ✓ | - | - | - |
图标供应商的名称。
name
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
name | - | string | ✓ | - | - | - |
图标名称。
size
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
size | - | string | - | 1em | - | - |
矩形图标大小。
height
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
height | - | string | - | 1em | - | - |
图标高度。
width
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
width | - | string | - | 1em | - | - |
图标宽度。
className
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
className | - | string | - | - | - | - |
<svg> 元素的额外 CSS 类名。
color
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
color | - | string | - | - | - | - |
图标颜色，比如
blue、
red、
#FF438A。
通过短代码使用图标
ico 和 icons/icon 都是有效的。
参数
vendor
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | vendor | string | ✓ | - | - | - |
图标供应商的名称。
name
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#1 | name | string | ✓ | - | - | - |
图标名称。
size
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#2 | size | string | - | 1em | - | - |
矩形图标大小。
height
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | height | string | - | 1em | - | - |
图标高度。
width
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | width | string | - | 1em | - | - |
图标宽度。
className
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | className | string | - | - | - | - |
<svg> 元素的额外 CSS 类名。
color
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | color | string | - | - | - | - |
图标颜色，比如
blue、
red、
#FF438A。
图标短代码示例
带有默认设置的图标
源码
1{{< ico bootstrap house >}}结果
自定义颜色的图标
源码
1{{< icons/icon vendor=bootstrap name=exclamation-circle color=red >}}结果
自定义类名的图标
源码
1{{< icons/icon vendor=bootstrap name=check-circle className="text-success" >}}结果
自定义大小的图标
源码
1{{< icons/icon vendor=bootstrap name=plus-circle size=3em >}}结果