Adding Icons To Obsidian's File Explorer
There are plugins available for adding icons to the Obsidian file-explorer, but I decided not to use them for two reasons:
- I'm trying to maintain a "plugin diet", on the grounds that the more plugins I add to Obsidian, the more likely I will hit problems related to incompatibility and performance
- The plugins I tried, although mostly functional, were nonetheless buggy.
Instead, it is possible to decorate the file-explorer with plugins using nothing other than CSS, via the Obsidian CSS "snippets" feature, and the standard set of Unicode emoji characters. This appeals to me because it avoids the need for a plugin just for what is largely a cosmetic concern.
There are two ways to add emoji to files:
Adding icons to explicitly named files/folders
The image shows files and folders in the root of my Obsidian vault, followed by the CSS needed to decorate them with emoji.
/*ALL FILES AND FOLDERS*/
.nav-folder-title-content::before, .nav-file-title-content::before {margin-right: 3px;}
/*SPECIFIC FILES AND FOLDERS*/
.nav-file-title[data-path = "Dashboard.md"] .nav-file-title-content::before {content: '📋';}
.nav-folder-title[data-path = "Inbox"] .nav-folder-title-content::before {content: '⬇️';}
.nav-folder-title[data-path = "Clippings"] .nav-folder-title-content::before {content: '📰';}
.nav-folder-title[data-path = "Diary"] .nav-folder-title-content::before {content: '📆';}
.nav-folder-title[data-path = "Work"] .nav-folder-title-content::before {content: '👨🏼💻';}
.nav-folder-title[data-path = "Home"] .nav-folder-title-content::before {content: '🏠️';}
.nav-folder-title[data-path = "Personal"] .nav-folder-title-content::before {content: '👤';}
.nav-folder-title[data-path $= "Reference"] .nav-folder-title-content::before {content: '🗄️';}
.nav-folder-title[data-path = "Zettelkasten"] .nav-folder-title-content::before {content: '🧠';}
.nav-folder-title[data-path = "Blog"] .nav-folder-title-content::before {content: '🌍';}
.nav-folder-title[data-path = "Indexes"] .nav-folder-title-content::before {content: '📜️';}
.nav-folder-title[data-path = "config"] .nav-folder-title-content::before {content: '⚙️';}
Adding icons to files/folders by pattern
It is also possible to decorate file/folder names in the Obsidian file-explorer using CSS selectors, like this:
/* FILES AND FOLDER PATTERNS*/
.nav-folder-title[data-path $= "archive"] .nav-folder-title-content::before {content: '️🏛️';}
.nav-file-title[data-path $= "Tasks.md"] .nav-file-title-content::before {content: '️☑️';}
The first CSS rule decorates any folder path that ends with ('$=') the word "archive", while the second decorates any file which ends with "Tasks.md". These rules apply to any matching folder/file, at any level in the vault.
This is actually quite useful - I generally add a note to my project folders called "Tasks" - and having an icon automatically added to the filename makes it easier to immediately locate in a potentially long list of files.