angular-fontawesome
angular-fontawesome copied to clipboard
Fa Counter is way too small
Describe the problem
The counter is very small on icons. completely illegible.
This is at 100% with just default icon size.
this is at 300% with just default icon size.
What did you expect?
to be able to see the counter number on the icon
Reproducible test case
https://angular-z8v4ux-ckohrf.stackblitz.io
There is a https://github.com/FortAwesome/angular-fontawesome/issues/85. But I will look if we can fix/improve this somehow.
I've looked at it and counter does behave as designed. The counter is supposed to be 1/4 of the icon's font size, that's why it is small, when icon size is 1x. In practice it is hard to make counter work perfectly for various combinations of icons, fonts and font sizes, so keeping it simple sounds like a reasonable approach. Then consumers can apply bits of CSS to make counter look good for their particular use case.
Having said that I've looked at your StackBlitz and tried to make counter look good: https://stackblitz.com/edit/angular-z8v4ux-gzuzmd. What do you think?
I've added fixedWidth=true
to ensure that icon is located in the top right corner of the icon. Then I've applied a custom class to move counter 50% of its height up and 50% of its width to the right and increased its size to be 1/2 of the icon's font size. It should be pretty easy to play with the values in the transform
property to achieve the desired look.
We can probably expose these 3 values as component inputs to make customisation more user friendly. Also looks like some fixes to icon positioning are required (fa-layers
has fixed size of 1em/1.25em, while icon sizes wary, messing up the counter position - not exactly in the corner of the icon).
You can use custom a custom default font-size
for the fa-layers-counter
component relative to its parent in your global styles file. For example, 1.2em
looks well for me:
// SCSS
:root {
fa-layers {
font-size: 1em;
fa-layers-counter {
font-size: 1.2em;
}
}
}