Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duotone circle-notch spins off center #15396

Closed
5 of 7 tasks
bobvandevijver opened this issue Aug 19, 2019 · 3 comments
Closed
5 of 7 tasks

Duotone circle-notch spins off center #15396

bobvandevijver opened this issue Aug 19, 2019 · 3 comments

Comments

@bobvandevijver
Copy link

bobvandevijver commented Aug 19, 2019

Describe the bug
The duotone variant of the circle-notch icon spins noticeably of center. This does not happen with the other variant of the circle-notch.

This is also visible on the FA-site itself.

To Reproduce

<i class="fas fa-spin fa-circle-notch fa-4x"></i><br><br>
<i class="far fa-spin fa-circle-notch fa-4x"></i><br><br>
<i class="fal fa-spin fa-circle-notch fa-4x"></i><br><br>
<i class="fad fa-spin fa-circle-notch fa-4x"></i><br><br>

fa-circle-notch

fa-4x was used to make it better visible.

Expected behavior
It should be centered correctly 😄

Version and implementation
Version: 5.10.1
Browser and version: Chrome 76.0.3809.100

  • SVG with JS
  • Web Fonts with CSS
  • SVG Sprites
  • On the Desktop

Bug report checklist

  • I have filled out as much of the above information as I can
  • I have included a test case because my odds go way up that the team can fix this when I do
  • I have searched for existing issues and to the best of my knowledge this is not a duplicate
@tagliala
Copy link
Member

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

Given that wobbling cannot be solved in the CSS framework (ref: https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons#issues), this issue is also present in the SVG framework.

I can confirm that there is a slight offset between fas fa-circle-notch and fad fa-circle notch

Demo: https://jsfiddle.net/tagliala/97r8f4y6/4/

The offset is also visible in the docs (fastly switch between these pages):

Let's assign @sensibleworld

This was referenced Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants