fa-circle-o-notch is not centered

[section61117]

It appears that when you animate this font with fa-spin, the circle is slowing moving around (as if the center of the vector is not the center of the circle). This is extremely noticeable the larger it gets, so an fa-5x for example clearly shows the icon moving (rather than just rotating) when fa-spin is applied. Compared with fa-spinner which rotates without any movement to the center of the icon.

[tagliala]

I can confirm this but I don't know if it's the same cause of #671

I will take a closer look on the next few days

[section61117]

Thanks @tagliala - not sure about the connection with #671 - I've had those issues in FF in a windows VM in past versions with fa-spin, but this was on a mac across Chrome, Safari, & FF using 4.1.0.

[scherii]

http://gfycat.com/ElementarySpecificAmericancrayfish

If you use fa-spin with fa-circle-o-notch on a dark background you can reproduce the result in the video above.

Seems like the white circle is the middle and the icon is slightly off.

[CoDEmanX]

There is no pixel-aligned center in an 14x14 pixels grid (which the icons are designed for to work at 14px) - isn't that the real issue?

[tagliala]

@CoDEmanX I think the problem is due to line-height and fonts in general

E.g: http://jsfiddle.net/tagliala/cd9bzpwx/3/

you can perfectly spin around a 14x14 circle

Firefox does a better work than chrome in this case

[tagliala]

@davegandy could you please check that this icon is centered in the grid?

I want to close this one, I think this is related to #671

[hugotox]

Hi! Please do not close this. The issue is present even in the font awesome examples page http://fortawesome.github.io/Font-Awesome/examples/

[isjns]

This seems to be the case for a lot of icons. If you use FontAwesomeFX and then retrieve the icon as a Text node and then do Text.setRotation(x) while incrementing x (to create a spinning animation), all circular icons I've tried, e.g. "circle-o-notch", "cog" and "spinner", gets a "wobbling/shaking" effect due to the icon not being perfectly centered.

[tagliala]

Since circle-o-notch already has some issues, I'm adding this to 5.0.0 milestone so Dave will eventually take a look

Ref: #9753 #8403

[LeanKit-Hunter]

If this is still under consideration - this may help.

I was running into the same issue with the wobbly spinning and tried to replicate the icon manually as SVG instead and was experiencing wobble that way as well.

I think the notch removed at the top is shortening the final glyph and shifting it off center. Changing the notch's placement allowed the SVG to still retain the equal height/width dimensions of a circle. When I changed my SVG to have the notch removed at about 45 degrees, the animation went a lot smoother.

[jpecor-pmi]

I was able to remove the wobble effect from the spinning fa-circle-o-notch by manually setting the transform-origin, accounting for the missing height due to the notch.

/* fix wobble on spinning circle-o-notch */
.fa-spin.fa-circle-o-notch {
    transform-origin: 50% 48.95%;
}

[tagliala]

I'm going to close this one, because this is a duplicate of #671.

The issue does not depend on the centering of the circle, and it is still present in FA 5.0.1 webfont on firefox

Webfont: https://jsfiddle.net/tagliala/tgzouajm/18/

But the SVG does not have this issue:

SVG: https://jsfiddle.net/tagliala/f019sa7v/7/

Sorry but we can't fix this, please consider an SVG spinner