How to customize mime types resource icons?

[antoniopaolini]

Hi everibody,
often I attach files in my notes that are not a recognized file type.
Then the resource icon is the generic one, like this:

I want to customize this icon.
I do it "by hands", as described below.

For example I added icon for eml with an inline css (per note).
In the note's body I put:

<style>
@import "....../fa-css.css"; 
.resource-icon {
	display: none;
	}
</style>

Then I use inline html like this:

[<i class="fas fa-envelope-open-text"></i> &nbsp; filename.eml](:/96571bfeed534467a160d4f62d8901cb)

that results in this:

It would be nice if we could add an icon in userchrome.css but how to set (recognize) the filetype?

[rxliuli]

It sounds like it can be implemented as a plugin

[antoniopaolini]

Do you think it is even necessary to implement a plugin?
I thought it could be achieved in a much simpler way, by acting on the CSS, but I don't know what to change.

I am not a programmer, I believe that if there is no simple solution I will continue as I do now.

[CalebJohn]

Fortunately there is a somewhat simple solution! You can use CSS to target the href of a link. The below example will replace the icon for any link that ends in .eml with another icon. This icon won't be correct for you, but I'm sure you can find the appropriate one. Good luck!

a[href$=".eml"]:before {
    content: "\f085";
}

[antoniopaolini]

Hello CalebJohn,
unfortunately this solution can't be works because the resource usually dont have file extension.

Note that the second link is forged, but the real resource link don't have eml extension.

[dpoulton]

@antoniopaolini

You could use title$= (the bit in the square brackets) instead of href$= but you will need a way to remove the default icon otherwise you will get two!!

The only way I can get this to happen is to not display the default icon for only "eml" titles and then add another one.

 a[title$=".eml"] span.resource-icon.fa-file {
     display: none;
}
 a[title$=".eml"]:before {
     content: "\????";
}

where \???? is the required unicode characters.

Looks clunky and probably could be done more efficiently

From what I can see Joplin knows it's an email file as it shows the link as type="message/rfc822" so I guess it just does not associate a specific icon with that type.

EDIT

I guess this means that a[type$="rfc822"] should work to select it as well...

[antoniopaolini]

Great!
I didn't know I could use the title attribute (I hadn't really thought about that!).

It works good in either your suggestions, then I solved in this way:

    a[title$=".eml"]:before {
        font-family: 'Font Awesome 5 Free';	font-weight: 900;
        content: "\f658\2002";
    }
	/* Questi due qui sotto sono equivalenti */
	/*a[title$=".eml"] .resource-icon {
		display: none;
	}*/
	a[type$="rfc822"] .resource-icon {
		display: none;
	}

@dpoulton, @CalebJohn , Thank you both so much!