Icons For Different File Types - CSS Snippet

Share & showcase
,
1

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

16 Likes
2

Do you think if it’s possible with pdf?

3

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
4

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.

5

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;
}
2 Likes
6

Thank you for the snippet! Could you share the way you use actual icons instead of emojis?

7

Love this. Where are you getting the non-emoji icons? Icongr.am/FontAwesome?

1 Like
8

I don’t know why I can’t get it to work with internal wikilinks to pdf like [[example-pdf-document.pdf]]
I have tried these ways

a[href^="pdf"]::before {
	content: "📝";
}

a[data-path$="pdf"]::before {
	content: "📝";
}

.internal-link[href^="pdf"]::before {
	content: "📝";
}

.internal-link[data-path$="pdf"]::before {
	content: "📝";
}