Icon colors match admonitions

This commit is contained in:
thhsh-local 2025-04-21 12:13:16 -04:00
parent 1d63898d0c
commit fc709ae7b9
Signed by: thhsh-local
SSH key fingerprint: SHA256:bLOq3d7dN1v5+W5U6pQekP0rBm0YUtC9qvh3TDYyAsg
3 changed files with 53 additions and 4 deletions

View file

@ -8,11 +8,33 @@ This site is written in Markdown and is generated using [:simple-materialformkdo
## Icons
Reference for all available Material for MkDocs icons: [:simple-materialformkdocs: Icons, Emojis](https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/)
### Commonly-used icons for links:
### Commonly-used icons for links
:octicons-arrow-right-16: `:octicons-arrow-right-16:` - used for links within the wiki
:octicons-tab-external-16: `:octicons-tab-external-16:` - used for links outside the wiki, but within StarCat Systems
:octicons-link-external-16: `:octicons-link-external-16:` - used for external links to sites not controlled by StarCat Systems
### Coloring icons
You can add a color to an icon by adding the CSS color after the icon, like this:
:fontawesome-solid-dragon:{ .bug-pink } `:fontawesome-solid-dragon:{ .bug-pink }`
Currently, the available configured colors are based off the built-in admonition colors and icons, as follows:
:fontawesome-regular-note-sticky:{ .note-blue } `:fontawesome-regular-note-sticky:{ .note-blue }`
:octicons-info-16:{ .info-blue } `:octicons-info-16:{ .info-blue }`
:octicons-flame-16:{ .tip-teal } `:octicons-flame-16:{ .tip-teal }`
:octicons-check-16:{ .success-green } `:octicons-check-16:{ .success-green }`
:octicons-question-16:{ .question-green } `:octicons-question-16:{ .question-green }`
:octicons-alert-16:{ .warning-yellow } `:octicons-alert-16:{ .warning-yellow }`
:octicons-x-circle-16:{ .failure-red } `:octicons-x-circle-16:{ .failure-red }`
:octicons-zap-16:{ .danger-red } `:octicons-zap-16:{ .danger-red }`
:octicons-bug-16:{ .bug-pink } `:octicons-bug-16:{ .bug-pink }`
:octicons-beaker-16:{ .example-purple } `:octicons-beaker-16:{ .example-purple }`
:octicons-quote-16:{ .quote-grey } `:octicons-quote-16:{ .quote-grey }`
:octicons-flame-16:{ .tip-teal } Want to know how these colors work? Check out [:simple-forgejo: the CSS in the source](https://git.starcat.systems/starcatsys/about_docs/src/branch/main/docs/stylesheets/extra.css).
---