Entypo Vs FontAwesome

I tried to use Entypo (which is used in the SPV) on the regular site. https://github.com/diaspora/diaspora/pull/4456

I had to build a character-selectors map manually, from the documentation: https://github.com/diaspora/diaspora/pull/4456/files#L1R52

It seems to have variable dimensions for its icons. The bookmark icons, for instance is really thin. And I had to inline-block them, add width, center them to get a uniform size for the sidebar.

Then it turns out some of the icons have different baselines :confused: The mail and megaphone icons for example, don’t sit well together because of this: https://f.cloud.github.com/assets/1003238/1041772/5f189696-0fda-11e3-995a-1f0fae3f2dd1.png

I don’t think this is worth the effort.

I suggest we switch to FontAwesome: http://fortawesome.github.io/Font-Awesome/
I have worked with this before and I’ve found it a pleasant experience.

What do you guys think?


Note: This discussion was imported from Loomio. Click here to view the original discussion.

Proposal: Use FontAwesome instead of Entypo


Outcome: N/A

Votes:

  • Yes: 3
  • Abstain: 9
  • No: 4
  • Block: 0

Note: This proposal was imported from Loomio. Vote details, some comments and metadata were not imported. Click here to view the proposal with all details on Loomio.

The main reason to use Entypo was that it has icons similar to glyphicons. I think we absolutely need to switch to a icon font for everything. If Entypo needs a lot of hacking to look good, I would not be against a switch to FontAwesome. Do the icons there actually have the same baseline?

I think font awesome is more of a replacement for glyphicons than Entypo. I couldn’t find the wrench icon, the coffee-cup icon, notifications icon, the plus icon, etc. Also, some of the entries in the character map on the site aren’t correct.

So what are your suggested replacements for Reshare and Comment in font awesome?

icon-comment and icon-retweet?

Hm, I really like the current comment icon, I kind of have the feeling that one is a bit too “round” for Diaspora.

Also the question mark icon is quite different. The wrench even goes into the opposite direction.

I actually like the icon-check-sign as replacement for the one used in the aspect edit pane, though I’m not sure what the corresponding cross icon should be.

The mention icon in the new profile sidebar would have to be replaced by the regular @ of the current font?

What do you suggest for the location marker, the ignore user, the participants icon in the converstions view, the not sharing icon in the new profile sidebar and the notifications icon?

Would it be worth doing a shout out for designers to create a bespoke icon font for diaspora*, containing all the icons we need?

http://fontello.com/

Creating a custom font from multiple existing ones is an option too, but I think we’d need a tool to correct the baselines then.

I made a mistake judging the baseline for the characters in Entypo. There was a 3px padding-top on message_inbox_badge, and that displaced it. I didn’t notice that until I saw the icons look fine on fontello.com. Here’s how it looks now: https://f.cloud.github.com/assets/1003238/1043645/707456fa-1002-11e3-84c5-29b99f6ede65.png

Hm, just a question: using font icons is great, but that means every websites using Entypo or fontawesome or anything else have the same icons? Don’t we risk to have the same problem than with bootstrap, every buttons etc have the same look everywhere? Originality is good, I’d like to see diaspora* different!

Well, yes, but I don’t think that’s a problem for icons. Let me explain why: Icons aren’t just visual sugar, they are hints and indicators for the user, they have a meaning. Be it “Here you find help” or “Here you can write a new message”. Those meanings are in most cases not obvious, they need to be learned. If a user encounters icons he encountered elsewhere he doesn’t (totally) need to relearn them, he feels more at home from the start. It’s a region where I learned to love Linux desktop environments over Windows. Windows applications often try be unique and special, they rarely reuse the common icon theme whereas most Linux applications can reuse the look and feel of the desktop environment, or at least be told to do so. This gives are more integrated and smooth experience to the user. Differentiation is good, but lets try to achieve it in places that are less crucial to interaction.

I think Fla means using the same icons, but a set designed specifically for Diaspora. So the heart is still a heart, but it looks very slightly different from the heart in Entypo etc. Just as with two different typefaces, you can recognise the letters as being the same letter, but the design of them is slightly different.

Exactly, goob.

Just a thought on the process: customizing an icon-font is more work than customizing just the icons, and requires expertise. We could use one of the fonts, port the current icon set to the font, and then slowly customize it.