Fa Counter is way too small

[Arackow]

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

[devoto13]

There is a https://github.com/FortAwesome/angular-fontawesome/issues/85. But I will look if we can fix/improve this somehow.

[devoto13]

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.

[devoto13]

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).

[nelson6e65]

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;
    }
  }
}