Font-awesome: Size consistency

[stof]

It would be great if all icons in the font were consistent in size. Currently, to have consistent icons in our menu, we need to add the icon-large class on some icons because they are smaller when applying the same font size.

[tagliala]

this is one of the weak points of fontawesome...

[davegandy]

So some icons have to be different heights, IMO. But I agree that they need to be more consistent across the board, and I want to tackle this in 4.0. Can folks point out which ones stand out as being too small?

[ESchuderer]

Either icon-user is too small or icon-key is too big.
I will test more tonight, as I process with my code.

By the way, there is a little "quickfix" I use, altough not completly tested:

[class^="icon-"]:before,
[class*=" icon-"]:before {
  width: 1em;
  text-align: center;
}

[tagliala]

can you please provide a fiddle instead of a screenshot?

btw there already is an icon-fixed-width class

http://jsfiddle.net/tagliala/ByuYN/14/

[ESchuderer]

In your fiddle everything looks alright even without that fixed width because of bootstraps min-width for those addon spans.

Uhm I'm just pasting in all my CSS Code for testing purposes, it's not Bootstrap, I still hope it helps out:
http://codepen.io/InitArt/pen/HDohI

[tagliala]

Yes, thanks it helps.

icon-fixed-width is a class from fontawesome. Your solution is fine too if you need some fine tuing

http://codepen.io/anon/pen/hCmei

PS: switched CSS to LESS because there are some mathematics inside (20/14em)

[ESchuderer]

Thanks to you, I've just noticed Font Awesome isn't using strict math yet, so all the math wasn't processed.
I'm still going to test the icons for size consistency if needed?

[tagliala]

there are a lot of icons that are not of the same width, this is by design. In some cases, icon-fixed-width does the job. If there are significant unwanted differences feel free to report them here

e.g.: #1510

[gbonanome]

Hi, I've created a complete list of icons shown inside an input-group ordered by width: http://jsfiddle.net/gbonanome/Frqxt/15/

Hope that helps.

[davegandy]

Hey, that's pretty cool. Nice list, love it. Does the fa-fw (fixed width) class work well enough?

[gbonanome]

Yes, it works well. See http://jsfiddle.net/hp8UP/1/

Just a question, why is set to (18em / 14)? Could be narrower (15em / 14)?

[davegandy]

(15em / 14) is an odd number of pixels at native size. So that means every single icon would be perfectly blurred. :) It definitely needs to be an even number, and some icons are somewhat wide. So 18 covers their width properly.

I'm going to close this issue for now.

[coorasse]

The Question Mark icon is smaller than the others.

[flq]

trash and calendar do not seem to be of the same size...

[patie]

the same font size.. looks ugly when each height is another :/

[taivu]

im also having this issue of icons being too different in height.

[fabionapodano]

expecially the user icon, which is often used near to users icon, is way smaller

[tagliala]

this problem should be addressed in the upcoming 5.0

[charlesr1971]

As well as fa-fw, how about a fixed height class fa-fh. This would be so cool for icons that are positioned along a horizontal axis. For instance fa-list-alt & fa-picture-o are different heights at the same font size...

[tagliala]

@charlesr1971 icons have the same height but some of them are wrongly centered (#1624) and others does not play well each other. FA 5.0.0 is supposed to fix all this issues.

[charlesr1971]

Geremia. Thanks for the reply but I cannot see how all the icons are the same height. Some icons are rectangular in the x-axis, some are square & some are rectangular in the y-axis. It will be interesting to see how FA5.0 handles this issue. A class like fa-fh would be great for lining up icons that have small height differences, like fa-list-alt & fa-picture-o. In FA4.3, these 2 icons have a height differential of about 2px at font-size:38px. And you are correct about the centering issue. This creates a further problem.

[tagliala]

Geremia. Thanks for the reply but I cannot see how all the icons are the same height

fa-fw sets a fixed width of 20/14 em and centers the icon in that space (and yes, odd-widthed icons have antialiasing issues) because icons have different width.

The vertical space used by icons, instead, is the same. It does not mean that all icons have the same height but that they already fill the same space. Edit: In other words, fa-fh is implicit.

It will be interesting to see how FA5.0 handles this issue

Thanks to all FA backers, all icons will be redesigned from scratch 😄

More information @ https://www.kickstarter.com/projects/232193852/font-awesome-5

[rodchenkov]

I have same issue with font awesome icons

[charlesr1971]

Geremia. What I mean by fa-fh, is that I would like this class to alter the height so that the icons line up horizontally. Visually, all the icons would align. But, thanks for the diagram. That is very useful. Essentially, the icons currently have the same bounding box height. And, it is fine to keep this, but maybe fa-fh could just make minor height adjustments when different icons are aligned horizontally.

[charlesr1971]

Let me clarify. I understand that the icons currently align through their centre line, as you diagram suggests. I would like the icons to align visually along the top, middle & bottom. I think this might look neater, even though some icons would occupy more pixel space. But, maybe this is a subjective issue.

[tagliala]

@rodchenkov if you think there is an issue with font awesome, provide a working example showing the issue. You can use this one as a base: https://jsfiddle.net/tagliala/s3msxtbe/

@charlesr1971 the problem is that the vertical space used by icon is already the same, so you cannot change alignment or vertical size via css. If you need minor tweaks, you should use specific css classes.

Take a look at this: https://jsfiddle.net/tagliala/s3msxtbe/13/

Note that FA 5.0.0 should fix this by redesign all icons. Basically fa-list-alt and fa-picture-o should have the same height or 2pixel difference, so they will look centered

[charlesr1971]

I am not trying to change the alignment or vertical size, I want fa-fh to change the font-size per icon, so that we get:

So, the bottom example, is what I would like to see, by just using fa-fh, rather than having to adjust the CSS per icon...

[tagliala]

@charlesr1971 what you are asking for requires a redesign, you cannot do this with a single css class.

[charlesr1971]

OK. Thanks. I wasn't sure whether this could be implemented or not. I guess it would require FA to create adjustments for every icon in relation to every other icon, which would be a bit of headache, not to mention creating file bloat. So, I can understand why this is a problem...

[tagliala]

This is still an issue

https://jsfiddle.net/tagliala/tgzouajm/39/

as @charlesr1971 said, this is quite hard to implement but the new grid should help.

I think that one of fa-image or fa-list-alt is not respecting the grid, because they have the same width but different height

[Xuuu111]

The issue is still there.
https://fontawesome.com/icons/ellipsis-v?style=light
This icon is extremely small compare to others.

[tagliala]

@Xuuu111 I'm going to close this one, because:

• Most of the size inconsistencies have been addressed
• It is hard to track a single thread like this one
• It is hard to make each couple of icons in the set to play well one against other

Please open a new individual request. Please use https://jsfiddle.net/tagliala/1o7sevju/ as a base for a fiddle showing the issue, I did the same for my comment before, or take a look at #14734

[NicolasDionB]

Would it be possible to get an option on a specific icon to resize/adjust it? An option to standardize the size of all the icons in a set would be even better but still, having a way to fix it somewhere would be a must. I understand you can fix all this, per icon, in css but I think the generated font files should include all the icons at the same size. I don't understand why it is not the case already.

[tagliala]

Hi @NicolasDionB

Do you mean the same horizontal size? If you do, then you can use fa-fw cass

Otherwise, we are trying our best to keep icons visually uniform, but it is hard with such a huge set and combination of icons

If you spotted a size inconsistency, please open a new individual request using https://jsfiddle.net/tagliala/1o7sevju/ as a base to show the issue

[davidhellmann]

Why not have the same Bounding Box for each Icon? looked into the SVGs and each Icon has another width. Would be nice the Icons are squared.

[NicolasDionB]

@tagliala Better late than never (for my late answer!!), I was talking about the general size of an icon, horizontal and vertical. I understand that CSS fix exist (the use of fa-fw beeing one) but when you try to use the icons in other situation such as in Flutter for instance, you can't rely on CSS for that. So I was just suggesting that some per-icon tweeking would be appreciated.

The solution I found was to create a size template in Illustrator and fit in my icons, export them individually to svg and then import them in Fort Awesome. It sure works but it's harder to maintain. Having some guidance and tweeking possibilities within Fort Awesome itself would be great. Thanks!