[enhancement] Allow icons to be at the beginning of the file title

[Smitty010]

It would be nice if there was an option to choose whether the icon appears at the beginning or the end of the filename. When I list files using dataview, I often can't see the icon because the filename is too long

[arminta7]

This would be very helpful.

[mdelobelle]

This snippet works for me:

.dataview.table-view-table > tbody > tr > td:first-child > span{
  display: grid;
  grid-template-columns: auto auto;
  float: left;
}

.dataview.table-view-table > tbody > tr > td:first-child > span > a.internal-link{
  grid-column: 2;
}

.dataview.table-view-table > tbody > tr > td:first-child > span > a.fileclass-icon{
  grid-area: 1;
  margin-right: 0.375em;
}

[Smitty010]

@mdelobelle's solution seems to work. Thanks for that.

A couple of comments

1. This only changes it for the dataview tables (which was my main issue so I'm pretty happy)
2. The links in the dataview table seem to be colored by the "Accent color" (in the appearance settings). I have a way around it (to make the links "black" again -- I'm in light mode), but it's pretty specific to my overall vault and isn't a general solution (hint: I used supercharged links).

[jrowberg]

I came here to ask for the same thing, and luckily found this discussion topic before posting something new. :)

Unlike @Smitty010's request (I haven't got far enough with Dataview to run into this), my hope was to be able to have the icon on the left both inline in the main editor text and (more especially) in the File Explorer tree. I went looking for a way to accomplish it with CSS alone, but couldn't figure it out, because it looks like the span that contains the icon is explicitly inserted after rather than before the span containing the filename or link. However, I'm no modern CSS wizard, and it might still be possible anyway.

How challenging would it be to add a toggle or dropdown that would allow officially displaying the icon as a prefix rather than a suffix? Or, if the full settings UI integration is more time-consuming, is there one spot in the main.js file where I could hunt around to see if I can do it myself?

[charle36]

This snippet allows me to put the icon before the title in the file explorer:

.tree-item-self.is-clickable.nav-file-title {
  display: grid;
  grid-template-columns: auto auto auto auto;
  float: left;
}

.tree-item-self.is-clickable.nav-file-title.content {
 	grid-column: 2;
}

.tree-item.nav-file .metadata-menu.fileclass-icon {
	margin-top: auto;
	margin-bottom: auto;
 	grid-column: 1;
	grid-row: 1;
	margin-right: 0.375em;
}

I hope this help.

I still can't find how to change it for links inside notes.

[AtlcatlQ]

I Use this snippet:

.data-link-icon[data-link-tags]::before{
    content: attr(data-link-tags)" ";
}

Replace tags with the field you want to use as icons, It works for almost absolutely everywhere when a file name is a link.

I have to say that this snippets relies on Supercharged Links Instead of Metadata Menu. I found something similar in This video from Bryan Jenks. But it's very useful. You just have to put the attributes you want for an Icon in the target Attributes for Stilying setting in Supercharged Links.

But I don't really know how to do it using Metadata Menu.

[charle36]

I played a little bit with the code and you can target links belonging in a specific class (per Metadata Menu configuration) with this selector (.fileclass-text). I was able to create a snippet who prefix the link with the name of the class, but that's it. xD

.fileclass-text::before {
  content: attr(fileclass-name)" ";
}

There is two challenges left, one is to get the actual icon used to reprent the class, the other is to make it a button, like the current suffix icon.