圖標配置

圖標搜索和使用指南。

大多數 HB 模塊都使用 Hugo 圖標模塊來生成和渲染圖標,例如:

如何搜索圖標?

所有可用的圖標都可以在 Hugo Icons Module 上找到,你也可以去官方圖標網站進行高級搜索。

圖標參數

儘管它們的根參數不同,如 iconnav_icon,但成員參數是相同的。

vendor

圖標供應商名稱,默認支持 bootstrapbs),要使用其他供應商,需要導入相應的模塊,以 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

圖標的名稱,如 bookhouse

color

圖標的十六進制顏色,如 green, #7952B3

className

圖標樣式的附加類名,如 text-success

razonyang
2024年6月15日 星期六 2023年12月9日 星期六