Font-awesome: Some FontAwesome 5 regular icons appears blurred at 14px

[SuperPat45]

Some FontAwesome 5 regular font icons appears blurred (and ugly) at 14px like square-check, file-alt which was not the case with their equivalents in version 4.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

the new font size for pixel perfect icon is 16px.

This was not considered a breaking change, since icons at 14px keep working.

If your website is using a 14px font-size base, you could fix things up by changing .fa's font size to 16px

I'm leaving this open for further comments

[AlexeySemigradsky]

@tagliala what about 24px? Sometimes the 16px is small, but 32px is big.

[tagliala]

Pixel perfection is supposed to work with 16px and multiples

However, the svg framework does a pretty good job with 24px icon size: https://jsfiddle.net/tagliala/5bwe9Lwz/3/

The webfont version, instead, doesn't look good. https://jsfiddle.net/tagliala/tgzouajm/7/

Also, this problem is mostly noticeable on non-retina display

[robmadole]

Version 5 represents a lot of changes and we took the opportunity to change the base size. We felt this a better fit with design systems and design trends that we saw. Thanks for the feedback.

[solstag]

Are the webfonts generated from the SVGs? If so, can't you provide everyone the means to compile for whatever size they need?

[tagliala]

Are the webfonts generated from the SVGs

Yes

If so, can't you provide everyone the means to compile for whatever size they need?

Problem is that icons are designed on a "16 unit" grid, so they will look blurry at 14px. You can find individual .svgs in the folder advanced-options/raw-svg

Eg: https://jsfiddle.net/tagliala/dLj341ys/

No font awesome there, just the raw svg file rendered at 14px