Merge pull request kmaasrud#41 from scottkillen-forks/tag-icons

Add snippet (Custom Icons for Frontmatter Tags)
zijie98 · Aug 26, 2021 · 81f73b4 · 81f73b4
2 parents 262a188 + e0ddcde
commit 81f73b4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -131,22 +131,27 @@ 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)
 
 Not enough? There are many other places related to snippets:
+
 - [#custom-css at Obsidian Forum](https://forum.obsidian.md/tag/custom-css/l/top)
 - [CSS snippets in Obsidian Help](https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets)
 - [Other GitHub repositories](https://github.com/search?q=obsidian-snippets)
 
 ## [Collapsing Sidebar](code/css-snippets/collapsing-sidebar.css)
+
 by [@Kmaasrud](https://github.com/kmaasrud)
 
 [📁 collapsing-sidebar.css](code/css-snippets/collapsing-sidebar.css)
 
 ---
+
 ## [Bullet Point Relationship Lines](code/css-snippets/bullet-point-relationship-lines.css)
+
 by [@deathau](https://github.com/deathau)
 
 Relationship lines that shows hierarchy, like in code editors.
@@ -246,7 +251,7 @@ Adds custom icons for files and folders. Please read the comments in the `.css`
 
 ---
 
-## Custom Icons for Specific Folders
+## [Custom Icons for Specific Folders](code/css-snippets/custom-icons-for-specific-folders.css)
 
 by [@ScottKillen](https://github.com/ScottKillen)
 
@@ -267,6 +272,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