In short:
Regarding icons fonts, icon size usually adjusts to the size of the text in which it was inserted. So, text size becomes a decisive parameter. Take Bootstrap3, for example. Its base text size is 14px, so any icon inserted in this text icon will be scaled to 14px. And here lies the problem: not all icons are optimized for such small sizes. They look distorted, and often unrecognizable.
Let’s consider some of the most popular icon fonts below.
Bootstrap3 is the most popular css framework. And it’s base text size is 14px. This means that icons should also correlate with this size.
However, Bootstrap3 uses Glyphicons, which, for some unknown reason, are optimized for 24px.
On top of that, Glyphicons is a standalone product with a separate license, which sometimes may complicate things a bit.
FontAwesome icons are 14px, yet many of them don’t look that good in small sizes:
In Bootstrap 4, the newer version of Bootstrap3, base text size is 16px.
Now we need 16px icon font. Where could we have it? We’ll talk about it later.
Icons in material design are optimized for 24px. Even though the text size is 14 px.
Perhaps it’s because of Google’s desire to target Android Developers. But who knows.
A bit less popular framework, Foundation, uses the very odd 14.4px size for icons. However, the icon’s placeholder or is still 16px.
Foundation icons are oriented for 16px text, yet the vectors themselves are not quite optimized: there are still small details that are not recognizable.
So, as web developers, we need more good icon fonts, that are optimized for 16px text size. Or… Could we have at least one? Well, there is one.
Design a stunning book cover with the Illustration Generator. This guide helps you brainstorm, craft…
Why is my printed logo not as vibrant as the digital one? Why do I…
Get an all-in-one UI kit to build a professional fintech landing page. It includes everything…
Meet Lunacy 10.0! Here is a brief intro to the new features with their demonstration:
Learn from 13 outstanding portfolio websites that creatively blend design, functionality, and personal branding to…
We asked users what they wanted to create with AI generators. Then we generated their…
This website uses cookies.