Icon colors match admonitions

docs/handbook/meta/editing.md

@@ -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).
+
+
 
 ---
 

docs/stylesheets/extra.css

@@ -1,6 +1,33 @@
+.note-blue {
+    color: #448AFF;
+  }
+.info-blue {
+    color: #00B8D4;
+  }
+.tip-teal {
+    color: #00BFA5;
+  }
+.success-green {
+    color: #00C853;
+  }
+.question-green {
+    color: #64DD17;
+  }
 .warning-yellow {
     color: #FF9100;
   }
-  .info-blue {
-    color: #00B8D4;
+.failure-red {
+    color: #FF5252;
+  }
+.danger-red {
+    color: #FF1744;
+  }
+.bug-pink {
+    color: #F50057;
+  }
+.example-purple {
+    color: #7C4DFF;
+  }
+.quote-grey {
+    color: #9E9E9E;
   }

mkdocs.yml

@@ -21,7 +21,7 @@ theme:
   favicon: assets/favicon.svg
   icon:
     admonition:
-      note: octicons/tag-16
+      note: fontawesome/regular/note-sticky
       abstract: material/select-multiple
       info: octicons/info-16
       tip: octicons/flame-16