圖標搜索和使用指南。
成為我們的資助者或贊助商,以支持我們的工作。
大多數 HB 模塊都使用 Hugo 圖標模塊來生成和渲染圖標,例如:
所有可用的圖標都可以在 Hugo Icons Module 上找到,你也可以去官方圖標網站進行高級搜索。
儘管它們的根參數不同,如 icon
或 nav_icon
,但成員參數是相同的。
vendor
圖標供應商名稱,默認支持 bootstrap
(bs
),要使用其他供應商,需要導入相應的模塊,以 Font Awesome 圖標為例。
hugo.toml
1[module]
2 [[module.imports]]
3 path = 'github.com/hugomods/icons/vendors/font-awesome'
hugo.yaml
1module:
2 imports:
3 - path: github.com/hugomods/icons/vendors/font-awesome
hugo.json
1{
2 "module": {
3 "imports": [
4 {
5 "path": "github.com/hugomods/icons/vendors/font-awesome"
6 }
7 ]
8 }
9}
現在你可以使用 Font Awesome 實體(fas
)、常規(far
)和品牌(fab
)圖標了。
name
圖標的名稱,如 book
、house
。
color
圖標的十六進制顏色,如 green
, #7952B3
。
className
圖標樣式的附加類名,如 text-success
。