A simple guide about searching and using icons.
Become a backer or sponsor to support our work.
Most of HB modules use Hugo Icons Module to generate and render icons, such as
All available icons can be found on Hugo Icons Module, you can also go to the official icons site for advanced search.
Although their root parameters are different, such as icon
or nav_icon
, the member parameters are the same.
vendor
The icons vendor name, the bootstrap
(bs
) is supported by default, to use other vendors, you’ll need to import the corresponding modules, let’s take Font Awesome icons as an example.
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}
Now you’re able to use Font Awesome solid (fas
), regular (far
) and brands (fab
) icons.
name
The name of icon, such as book
, house
.
color
The hex color of icon, such as green
, #7952B3
.
className
The additional class name of icon for styling, such as text-success
.