瀏覽文檔

用法

2024年3月5日 2 分鐘閱讀 Docs 短代碼 模板 Partial

學習如何通過模板和短代碼使用圖標。

本頁內容
贊助

通過模板使用圖標

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

索引名稱類型必填默認值版本
#0vendorstring✓--

圖標供應商的名稱。

name

索引名稱類型必填默認值版本
#1namestring✓--

圖標名稱。

size

索引名稱類型必填默認值版本
#2sizestring-1em-

矩形圖標大小。

height

索引名稱類型必填默認值版本
-heightstring-1em-

圖標高度。

width

索引名稱類型必填默認值版本
-widthstring-1em-

圖標寬度。

className

索引名稱類型必填默認值版本
-classNamestring---

<svg> 元素的額外 CSS 類名。

color

索引名稱類型必填默認值版本
-colorstring---

圖標顏色，比如 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 >}}
結果
供應商
樣式