Icon fons like FontAwesome, Icomoon etc

Hi, i was wondering, is it possible to use symbols (apart form unicode) on Joplin? Cause it would be really helpful if i could past some FontAwesome icons, let’s say. I was used to it on my Linux to-do-app, to have some symbols, let’s say, on a note title. And then i was thinking if it is possible on Joplin.

1 Like

Could someone please just answer, like if it is not possible, just state that, or something…

Hey @hrqmonteiro, it could work, but not very easily.

You’d have to type out the HTML each time you want to add a symbol (something like <i class="fas fa-tags"></i>), but since rendered HTML doesn’t load the FontAwesome CSS or Awesome font file, you still won’t see the symbol. You’d need to embed the CSS for FontAwesome inside userstyles.css and install the FontAwesome font on your computer… Also, since note titles can’t have HTML, it wouldn’t work there, so only in the body of the note.

1 Like

great explanation, do you think this could be made into a plugin?

@subie That’s a good question. I think the plugin system is still being built, so I am not sure if this is a good candidate.

1 Like

I saw your additional post on GitHub about this feature request. You mentioned that you could achieve what you wanted by using the “Arimo Nerd Font” for note titles?

If so, one possible method is to use userchrome.css and add

 input {
         font-family: "Arimo Nerd Font";
}

The downside is that ALL inputs like search fields and path fields in settings are also affected. It may be possible to tweak the css to somehow restrict this to just the note title but that is a bit beyond me. Could be a starting point?

That’s an interesting approach – the CSS to target the input for the note title is

#react-root div div div:last-child div input

You’d probably also want to change the font of .note-list div * so that the list of notes would also be rendered the same way.

1 Like

Yes, yes. I actually did that, and i forgot about this post (in GH and in here :grin:)

But yes, i was able to do it. I patched my sans font and my mono font and added them on the userchrome.css. And it worked, as i presumed.

The issue i faced was that this would only show the glyph on my Linux, not on the android. So i found a module to change the android font, and patched all my system fonts, too. So now i got the glyphs in all my devices. It is looking stunning.

Would be nice to have this as a default feature though, of course. But being possible to do it like this is nice already!

I wasn’t able to do that. My font titles (or pretty much anything on the rendered notes) don’t show any of my glyphs.

Could you please show how to do it more comprehensively?

Actually i got it now, nevermind :grin:

Glad you got figured it out. Would you be able to post the CSS code you ended up using? Might help the next person :slight_smile:

Sure! I’m finishing my theme (the other css things on it), then i would already be uploading it on my github. Then i surely will post it here in the forum!

Awesome, looking forward to seeing your styles!

Hi! Sorry for nercomancing, but is there a guide for how to accomplish this, i.e. using fontawesome in Joplin? Preferably in a ELI5 style... :smile:

Also interested in this! Really want icons inline with my notes.