Icons For Different File Types - CSS Snippet

I just posted this in the Discord css-channel but thought Iโ€™d share here as well.

I found a neat way to set different icons based on file type. Using [data-type$(file type here)] you can select based on the attribute value that ends in (file type here). (Had to use emojis for the example since my icons are very long strings).

Ex:

.nav-file-title[data-path$="jpeg"] .nav-file-title-content:before{
content: "๐ŸŒ„";
}

.nav-file-title[data-path$="png"] .nav-file-title-content:before{
content: "๐ŸŽจ";
}

image

Emoji example ^^

image

10 Likes

Do you think if itโ€™s possible with pdf?

Yea! using [data-path$="pdf"] you should be able to add icons for pdf files.

Screen Shot 2021-07-19 at 12.56.55 PM

2 Likes

this is great, thanks!

Could you by any chance also paste the snippet you use that puts the file extension to the back (or remove them entirely)? with custom icons for every filetype, the small box with โ€œpngโ€ or โ€œpdfโ€ inside becomes kind of unnecessary clutter.

Sure (added css for starred files so they arenโ€™t affected).

To reverse the tags:

.nav-file-title {
margin-right: 10px;
flex-direction: row-reverse;
}

[data-type="starred"] .nav-file-title {
  flex-direction: row;
}

To remove the tags:

.nav-file-tag{
  display: none;
}
1 Like