Skip to content

Font Awesome icon support for section Icons - #829

Open
Nolram567 wants to merge 1 commit into
alex-shpak:mainfrom
Nolram567:main
Open

Font Awesome icon support for section Icons#829
Nolram567 wants to merge 1 commit into
alex-shpak:mainfrom
Nolram567:main

Conversation

@Nolram567

Copy link
Copy Markdown

FontAwesome Icons for Section Icons

I really enjoy using this theme and am very happy with it. For my personal use, I implemented a small feature that allows FontAwesome icons to be used as section icons, similar to the existing BookIcons feature.

This approach means that FontAwesome SVG files no longer need to be downloaded and added to the repository individually. Icons can simply be referenced by their CSS class name.

How it works

The icons are rendered using an <i> element with the corresponding FontAwesome CSS classes. The element is marked with aria-hidden="true" so that screen readers will ignore the decorative icon.

To enable the feature, FontAwesome needs to be set to true in hugo.toml:

[params]
    FontAwesome = true

After enabling the feature, a section icon can be specified in the sections frontmatter, for example:

fontAwesomeIcon = "fa-solid fa-file-code"

The corresponding FontAwesome icon will then be displayed as the section icon.

Features

  • Extends the existing BookIcons functionality to support FontAwesome icons for sections.
  • Uses only HTML and CSS, no JavaScript is required.
  • Reuses the existing book-icon CSS class for consistent styling and integration.
  • Compatible with dark mode; icons automatically adapt to the current theme.
  • Opt-in by design: the feature must be explicitly enabled via hugo.toml, so the default configuration and existing behavior remain unchanged.
  • FontAwesome is available under a permissive license, making it suitable for users of the theme, even in commercial contexts: https://fontawesome.com/license/free

This provides a simple way to use the large FontAwesome icon library without having to manage individual SVG files.

I have included an example image below.

fontawesomeicons
@alex-shpak

Copy link
Copy Markdown
Owner

Hello! Thanks for the PR.
I think theme should not include a specific set of icons, and it should not load them remotely by default.
Tho, what we can consider here is extract either menu item template, or menu icon, so it can be easily overwritten.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants