Using Font Awesome Lib. for Icons

Hi everyone,

Currently we are using fork-awesome library for icons in Joplins.
But I think we have better option for icons lib which is font-awesome library.

Why we should change the current font library?

  • Because some icons are sharp and some are solid style and some are regular style. But a good theme and design needs to use same style of icons and smooth icons
  • Font Awesome have up to date, smooth and professionally designed icon which are better to use.

Font Awesome have free and pro icons, although solid icon style library is free to use and it contains all the necessary icons.
Link: Find Icons with the Perfect Look & Feel | Font Awesome

All the icons I used on my mockups in this post are of font-awesome library

I implemented this library on my desktop and these are the changes

Changes

Font Awesome


Please share your opinions and suggestions

One more question regarding PR
Do I have to first open issue and then have to PR?
As mentioned in Troubleshooting FAQ and collecting topic for contributing to Joplin codebase by @PackElend

2 Likes

yes, any fix need an issue.
Any feature request has to be discussed in Features before you get an OK for doing a feature request on GitHub

I think we are using font-awesome as of now.
I see both of them in the code. I’m not sure.

In the image fontawesome (4), the first row is Fork Awesome (currently in use) and the second Font Awesome.

1 Like

I was using Font Awesome before but I’ve switched to Fork Awesome as it’s open source and has similar icons.

In fact I can’t really say the Font Awesome icons look better in your examples? A bit different but neither more beautiful nor uglier, unless I’m missing something.

Look, this will not make huge different for us, but it still make little impact.
This little impact is necessary in my opinion.

I tried to explain this different in this illustration

Even fontawesome's icons are this perfect that when I drawn the circle around them they came at center of circles while forkawesome's icons not.
ft vs fk - Copy

And Font Awesome is open source too, chk this Free License | Font Awesome

But I found them more smooth, perfect and better looking then currently implemented icons, and many others will found that too thats the reason to use font-awesome's icon.

And Can I ask what is the reason to switching to fork awesome?

2 Likes

And Can I ask what is the reason to switching to fork awesome?

Brother, it's because ForkAwesome is an open-source library and as of Joplin is also an open source software, we're here trying to use more of resources which are open-source and tbh it has similar icons and that's what laurent said.

1 Like

As I mentioned previously, font awesome is open source too

According to designing prospective I think it is important to use better version whenever available and it is free as well.

1 Like

We switch to Fork Awesome at some point because someone suggested using it (maybe @tessus?) and it was making sense. You’re also making a convincing case though, so perhaps we should reconsider.

On the icons you’ve used, are you sure they are all under their free license?

1 Like

Yes all the icons I have used are under fontawesome.com's free license (I checked it again.)

I included License as well in Joplin
Should I pull request now as everything is ready?

1 Like

@memophen Thanks I made the changes in above image as well

Hmm, that seems like a big change, isn't it? As we use Fork Awesome a bit everywhere - in the toolbar, but also in the rendered notes (for example to display checkboxes) and all those places need to be updated. Or did you already do this?

2 Likes

I already did this, All the screenshots I shown above are not photoshop, they are real images. :slight_smile:

2 Likes

How would the new checkbox look?

@laurent and @packelend
I created the issue regarding this and made the pull request.

Issue: https://github.com/laurent22/joplin/issues/3137
PR: https://github.com/laurent22/joplin/pull/3138

I am really happy to contribute in the Joplin’s Community and this is my first contribution. So please look into the issue and let me know how can I do it better.

1 Like

@laurent Aren’t we updating to font awesome as there has been no activities on my pull request

We have a large backlog of pull requests as you can see, so it will take some times I’m afraid.

2 Likes

@giteshsharma I’m not sure where you see the thin and thick lines. They look perfectly fine to me:

image

Also the toolbar icons look fine. I don’t see the dot fron the i touching the border.

Update: I’m not inherently against this change, but I don’t understand the reasoning.

2 Likes

Let me explain

It depends on the screen resolution of the user. And Fork Awesome don't handle this point.

Softwares varies from devices to devices, thats why some user have problems while other's don't

In my pc screen resolution is (1366x768) and someone have (1280x720), he may or may not view icons clearly.
For instance - In your PC icons looks perfect but in my PC they don't.

And still other points I made in above image remain same for your icons as well.
And try to resize Joplin's Window in your Pc, this will sure disturb the lines of icons.

In Font Awesome, screen size doesn't matter, Why? Honestly I don't know but they fix this issue, so it doesn't matter at all.

And we have other options for icons libraries as well that we can use
like Material Design Icons by Google.

I am just suggesting a better option than fork awesome.

BTW Did you checked for License Issues? As you were mentioning on github.

I can confirm they look kinda odd in my laptop. It’s got a 1366x768 resolution screen.

2 Likes