图标配置

图标搜索和使用指南。

赞助

成为我们的资助者或赞助商,以支持我们的工作。

赞助商

大多数 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年11月21日星期四 2023年12月9日星期六