search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.6k stars 12.2k forks source link

mouse-pointer not centered when stacked #9834

Closed ShaunR closed 5 years ago

ShaunR commented 8 years ago

I know it's not just this icon because I've seen this with others. I'm not sure the cause, haven't really looked but I have a feeling it has to do with the icons that require fa-fw to line up correctly. adding fa-fw doesn't help in this case.

Here's proof of the issue.

https://jsfiddle.net/ea0ebmr6/

tagliala commented 8 years ago

I can confirm, but I don't know what is the best approach to solve this. Maybe custom css or we need empty space on the left side of the icon.

Assigning to 5.0.0 milestone, so Dave will eventually take a look

cherrador commented 8 years ago

Actually, I did measurement test on that stack and the box of the arrow icon is centered. To to be fair it has a couple of pixels out of center, but pretty much, it is centered. The problem is a visual trick on that icon, it gives the impression to be heavier on the left side. sample-1

This was taken from your jsfiddle sample and using Chrome DevTools to reveal the boundary rectangle. notice the same amount of space on both sides.

To visually fix the problem, you need to move completely move the icon to right and then nudge it to left until it looks OK. Here is what it should look like. sample-2

Notice the rectangle is out of center from the circle, but visually now the arrow looks centered.

I did using the FA CSS stack extension that I been incrementally building at:

https://jsfiddle.net/cherrador/jomgLb2h/

I designed this stack to use internal sizes of 1.5em and calculate the locations based on this factor. If you want a 1em icon you could edit the styles and add add extra nudging percentage.

tagliala commented 6 years ago

This is still an issue with FA 5

https://jsfiddle.net/tagliala/tgzouajm/17/

tagliala commented 6 years ago

Hi,

I'm going to remove the 5.0.0 milestone but I will still tkeep this open

I would go for a custom workaround because:

  1. font awsome icons are not of the same width by design choice
  2. a mouse pointer is by its nature unbalanced

CSS: https://jsfiddle.net/tagliala/qq2eLxo1/12/ SVG: https://jsfiddle.net/tagliala/vLae8ted/46/

sensibleworld commented 5 years ago

Centering irregular shapes within a circle is one of the trickier visual balance problems. In the case of the pointer icon, the viewbox is optimized to the shape of the icon itself. That way, the top-left of the icon is the same as the top-left of the viewbox. I think this is particularly important for a "pointer" icon, which ostensibly is used to click and grab things. (I wouldn't want the "click" point to be x number of pixels to the left of the pointer tip.)

That said, it makes it tricky when wanting to center it within a circular shape. The best we can offer is the trick mentioned above, which is to optically shift the icon when you stack in on top of another one. If/when we create an fa-circle-pointer icon, we'll have the alignment baked in. (And if that icon is of interest, definitely open a new request for one!)