Add snippet (Custom Icons for Frontmatter Tags)

zijie98 · Aug 26, 2021 · 1f86608 · 1f86608
1 parent c083ac0
commit 1f86608
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@ Small tweaks to add to your `vault/.obsidian/snippets` folder.
 - [Custom Icons Differing Files and Folders](#custom-icons-differing-files-and-folders)
 - [Custom Icons for Specific Folders](#custom-icons-for-specific-folders)
 - [Tag Pills](#tag-pills)
+- [Custom Icons for Frontmatter Tags](custom-icons-for-frontmatter-tags)
 - [Outliner For The Outline and File Explorer](#outliner-for-the-outline-and-file-explorer)
 - [Better Bullet Points in Edit Mode](#better-bullet-points-in-edit-mode)
 - [Image Cards](#image-cards)
@@ -227,6 +228,18 @@ by [@uzerper](https://forum.obsidian.md/u/uzerper)
 
 ---
 
+## [Custom Icons for Frontmatter Tags](code/css-snippets/custom-icons-for-frontmatter-tags.css)
+by [@ScottKillen](https://github.com/ScottKillen)
+
+Adds custom icons to **specific** tags in the frontmatter section.
+Compatible with [Tag Pills](#tag-pills) and most themes, including [minimal](https://forum.obsidian.md/t/minimal-theme/3659).
+
+![](media/css-snippets/custom-icons-for-frontmatter-tags-1.png)
+
+[📁 custom-icons-for-frontmatter-tags.css](code/css-snippets/custom-icons-for-frontmatter-tags.css)
+
+---
+
 ## [Outliner For The Outline and File Explorer](code/css-snippets/outliner-for-the-outline-and-file-explorer.css)
 by [@Shamama](https://forum.obsidian.md/u/Shamama), [@wonton](https://forum.obsidian.md/u/wonton/summary) & [@konhi](https://github.com/konhi)
 

diff --git a/code/css-snippets/custom-icons-for-frontmatter-tags.css b/code/css-snippets/custom-icons-for-frontmatter-tags.css
@@ -0,0 +1,39 @@
+/* ====== Custom icons for frontmatter tags ======== */
+
+/* Add tag icon to the right of all frontmatter tags by default */
+.frontmatter-section-tags .tag:not(.token)::after {
+  content: '🔖';
+}
+
+/* Remove the tag icon from specific tags */
+.frontmatter-section-tags .tag[href^='#Article']::after,
+.frontmatter-section-tags .tag[href^='#DailyNote']::after,
+.frontmatter-section-tags .tag[href^='#Definition']::after,
+.frontmatter-section-tags .tag[href^='#Note']::after,
+.frontmatter-section-tags .tag[href^='#Person']::after,
+.frontmatter-section-tags .tag[href^='#Sermon']::after,
+.frontmatter-section-tags .tag[href^='#Task']::after {
+  content: '';
+}
+
+/* Add icon to the left of specific tags */
+.frontmatter-section-tags .tag[href^='#Article']::before {
+  content: '📰';
+}
+
+.frontmatter-section-tags .tag[href^='#DailyNote']::before,
+.frontmatter-section-tags .tag[href^='#Note']::before {
+  content: '📝';
+}
+
+.frontmatter-section-tags .tag[href^='#Definition']::before {
+  content: '📖';
+}
+
+.frontmatter-section-tags .tag[href^='#Person']::before {
+  content: '🧑';
+}
+
+.frontmatter-section-tags .tag[href^='#Sermon']::before {
+  content: '✝️';
+}
diff --git a/media/css-snippets/custom-icons-for-frontmatter-tags-1.png b/media/css-snippets/custom-icons-for-frontmatter-tags-1.png