#1

I thought I post this as a separate topic because some people in Meta Post - Common CSS Hacks liked it. This hack is inspired by the code of @riddyrayes to have emoji as folder icons

I really like the Remixicon icon set and I wanted to see if I could use them as folder icons.

image

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?

7 Likes
Is it possible to influence the HTML (sidebar) in a plugin?
#2

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!

#3

Hi Jan,

I have used your code to put some icons in front of some root folders (like ā€œBijlagenā€ "Planning ā€œTemplatesā€) and I really like it! Thanks!

  • I cannot, however, figure out how to make the icons work for subfolders.
  • Nor can I discover how to make the icons change color on hover

Can you pls enlighten me on how to achieve both?

#4

I like this a lot. It would be nice if you could choose the icon for a folder directly from the context menu.

#5

Hi @FiekeB Iā€™m sorry to say, but Iā€™m not that elaborate in CSS so I really wouldnā€™t know. Hopefully someone else knows the answer to this.

#6

That would be great. I think a plugin would be needed for this but Iā€™m not technical enough to create something like that.

1 Like
#7

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.

4 Likes
#8

Hi,

Anyone found how to add foldersā€™ icon in dark mode ?

Is there any possibility to automatically put icon when new folder or note is created instead of modifing each time the css ?

Thx

#9

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!

#10

It actually got released several weeks ago :slight_smile:

1 Like
#11

@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

Screenshot 2021-10-27 at 5.12.12 PM

#12

Well it was not intentional but I will see it as a feature instead of a bug :wink:

#13

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.

guide: set folder icon Ā· aidenlx/alx-folder-note Wiki Ā· GitHub

@FloWy, if you want to utilize user-imported custom icons, feel free to use the exposed api :slight_smile: