Oversized DIVs while working with stacked fa-icons

[Taygair]

Problem When working with stacked fa-icons the DIV surrounding it is always bigger as the biggest fa-icon inside. This causes visual misbehaviour and unpredictable placement results like switching the handpointer on hover happens too early. Maybe I'm doing it all wrong but I just have used and adapted the samples from your homepage. => I have added two problems in my code. This problem is covered in the lower area of the HTML (Stacked icons demo). I will create another issue for the other problem. Expected result: The DIV is as big as the biggest fa-icon inside (resolves also the vertical center problem).

What version and implementation are you using?

Version: 5.0.6 Browser and version: All the latest versions (Safari, FF, Chrome) on Mac

• [x] SVG with JS
• [ ] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

Reproducible test case

You can try it out right away here: http://geoneer.me/html/afproblem.html

[tagliala]

Editable fiddle: https://jsfiddle.net/tagliala/txbt5px0/

[tagliala]

For unknown reasons the DIVs of these three stacked icons (no transform, shrink, grow) are always bigger than the icons itself.

The reason is fa-fw. By design choice, icons in font awesome have not the same width, so we use the fa-fw class to horizontally center contents.

If you move the mouse pointer inside the red area (DIV background) the hover handpointer already switches (too early).

I'm not sure about that. It should be the right time, since the red area of the div is using all the fa-fw space, as expected: https://jsfiddle.net/tagliala/vLae8ted/52/

Since there are a few css rules involved in creating layers, I have to ask to @robmadole clarifications about this

[Taygair]

I was not aware of the fa-fw class. I just removed it from my online example: http://geoneer.me/html/afproblem.html The DIV size didn't change (still too big). The icons are just no more centered but the problem is still there. As you (FA) have created the icons (SVG) you know its size of each icon, you also know it when any transformation occurs. So why not either make the DIV around it as big as the biggest (transfomred) icon inside or taking the size of the DIV (if set)?

[robmadole]

@Taygair adding fa-fw to the fa-layers <div> corrects these issue from what I can see:

https://codepen.io/fontawesome/pen/3ba80c9843d174ab0c6b26993837ff34/

Using fa-fw is documented in the examples for Layers.

So why not either make the DIV around it as big as the biggest (transfomred) icon inside or taking the size of the DIV (if set)?

We haven't discovered a way to do this with CSS.