fa-cog isn't centered when it's spinning for admin templates

[jeevasusej]

Expected

fa-cod should be centered when it's spinning.

Actual

fa-cog isn't centered when it's spinning for admin templates.

I am using the priced template, so i cannot use the same one to reproduce. What was actual problem is posted in the fontawesome.
Please refer the following link.
FortAwesome/Font-Awesome#2524.

The icon should be wrapped with the parent.

[mar10]

I tried to reproduce it with the ext-glyph and these includes

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="skin-bootstrap/ui.fancytree.css" rel="stylesheet">

and this config

$("#tree").fancytree({
  extensions: ["glyph"],
  source: SOURCE,
  glyph: {
    preset: "awesome4",
    map: {
      // Override distinct default icons here
      doc: "fa fa-cog fa-spin"
    }
},

on Safari the cog icon was wobbling as you describe.
I was able to fix it by adding the fa-fw class:

      doc: "fa fa-cog fa-spin fa-fw",

If this works in your scenario, we could simply add the fa-fw class to the default presets...

[mar10]

@jeevasusej were you able to try this out?

[jeevasusej]

Sorry I didn't check yet. I will check and let you know.

[mar10]

Assuming ok, for now

[jeevasusej]

Sorry for the too delay reply.
Please check the following demo
http://jsfiddle.net/Luwoamzj/18/

[mar10]

Hi,
I only see this problem on FF (not Chrome, IE 11, Safari, Edge)
Seems to be a known problem:
FortAwesome/Font-Awesome#11651
I don't know how to fix this, if even Font-Awesome does does not seem to have a simple solution.
I am open to suggestions though.

[jeevasusej]

We need to wrap the icon. So icon should be inside the span.
I have fixed this issue already. But it was rejected. :-p .
Please see the following for fix.
https://github.com/mar10/fancytree/pull/771/files

[mar10]

The PR was rejected since we don't want generally complicate the markup just because Font Awesome 4 doesn't get spinning animations right for Firefox.
This can be fixed more specific like so (expand the 'more...' node):
https://codepen.io/mar10/pen/yvrWzP
(Font Awesome 5 doesn't seem to require this: https://codepen.io/mar10/pen/PQvPjK)