瀏覽文檔

用法

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

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

贊助

成為我們的資助者或贊助商，以支持我們的工作。

愛發電 GitHub 贊助商 PayPal
本頁內容
贊助商

通過模板使用圖標

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 >}}
結果
配置
樣式