Add documentation on icon pack names

[ungive]

Description

I don't know what IDs/names I need to use for the supported icon packs, like Font Awesome. I have to search around GitHub or elsewhere to find examples of how they are used. The IDs are also different for CSS, zensical.toml and front matter.

For instance, I currently have trouble figuring out how to use Material Design's "file-gif-box" icon on Front Matter. I'm just trying around and the build server stops with a fatal error: could not render include: error in "partials/nav.html" (in base.html:172)

Related links

• https://zensical.org/docs/authoring/icons-emojis#included-icon-sets
• Related issue that also mentions this problem: Icon and emoji search #99

Proposed change

It would be good to document what the identifiers are for each icon pack.

E.g. document that "Font Awesome" requires "fontawesome/brands/discord" in front matter. Finding out that a second slash is needed here also took me a while.

Before submitting

• I have read and followed the documentation issue guidelines.
• I have attached the links to the affected sections of the documentation

[ungive]

For reference, here are the ones for use as the page icon in front matter:

• Lucide: lucide/<icon>, e.g. lucide/wrench
• Font Awesome: fontawesome/<category>/<icon> e.g. fontawesome/brands/discord
• Material Design: material/<icon> e.g. material/file-gif-box
• Octicons: octicons/<icon>-<size> e.g. octicons/mark-github-16
• Simple Icons: simple/<icon> e.g. simple/docker

[squidfunk]

Thanks for suggesting! This is essentially a tooling issue, since you can also include custom icons that need to be discoverable.