I really like the Remixicon icon set and I wanted to see if I could use them as folder icons.
It’s quite a hacky solution. And you will have to adapt it to your theme and font sizes. If you have improvements please post them.
The below code is to make it work for California Coast theme.
You can get the SVG URL of the icon you want to use by going to remixicons.com
Select the icon you like.
Click the triangle at ‘Copy SVG’
Choose ‘DataURL’.
Copy that URL and
Replace the background URL in the css below.
Don’t forget to change the ‘Timestamped’ name of the folder in the first line of CSS for your own folders’ name.
It’s more likely than not that for other themes you have to change the background-size, translate value, height, width and margin values to make everything line up nicely.
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="Timestamped"] .nav-folder-title-content::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm-2 2H9v2H7V5H4v4h16V5h-3v2h-2V5zm5 6H4v8h16v-8z'/%3E%3C/svg%3E");
background-size: 14px 14px; /* adopt this to your file tree font height */
transform: translate(0px, 4px); /* to position the icon */
background-repeat: no-repeat;
display: inline-block;
height: 16px;
width: 16px;
margin: -4px 2px 0 0;
}
I have been thinking if it would be possible to use the icons that the plugin Obisidian Icons pulls in but I couldn’t find out how. If anyone has an idea for this?
I’m sorry to report that the above code doesn’t work in Dark mode. If anyone can contribute a line of code to make the icon adopt to the current mode? Thanks!
Hey there. At the moment I am working on a plugin that adds this functionality to folders. The plugin will be available whenever it is approved. In addition, I will add more icon packs, better loading, and much more styling options for folders.
Wow this is really great. Thanks for putting your time in it. Much better than the hacky solution that I put together from other sources. Looking forward to the release!
@FloWy so it turns out that after your most recent round of tweaks, the plugin works on notes too! Not sure if it was intentional or not but it’s definitely useful for ‘pinning’ notes without actually pinning them
Now alx folder note v0.12.0 provide similar feature as @FloWy’s icon folder plugin, which can set icon field with icon shortcode in frontmatter of foler note to specify linked folder’s icon. It depends on obsidian-icon-shortcodes api.
