Icons Configuration

A simple guide about searching and using icons.

Donate

Become a backer or sponsor to support our work.

Sponsors

Most of HB modules use Hugo Icons Module to generate and render icons, such as

How to Search Icons?

All available icons can be found on Hugo Icons Module, you can also go to the official icons site for advanced search.

Icons Parameters

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.

razonyang
Saturday, December 21, 2024 Saturday, December 9, 2023