FontAwesome的“Cog”图标旋转不平衡。

Question

我们正在使用并在某些js事件上添加/删除fa-spin。问题很明显，在3x倍率下，齿轮不会围绕一个固定的轴旋转。我怀疑这是因为图标本身（SVG）由Chrome报告为42 x 49像素，即使图像在视觉上是正方形的。有什么建议可以解决这个问题吗？

这是微妙但明显的： http://www.screencast.com/t/NwJTcKe4o

- Jim Thompson

Answer 1

我这里也遇到了“fa-refresh”图片的同样问题。我通过调整本地CSS中的原点来解决了这个问题：

.fa-spin {
    -webkit-transform-origin: 35% 50%;
    -ms-transform-origin: 35% 50%;
    transform-origin: 35% 50%;
}

这是一个hack，但它有效。测试了其他几个图标，它们也看起来“居中”了。但如果您强制使用较大的图标（fa-lg，fa-2x等），则需要调整这些数字。

我不确定是什么原因导致了这种情况。

- adamrmcd

---

你有什么想法可以让fa-cog以3倍速度平稳旋转？我不是CSS专家 :) - Jim Thompson

好主意。即使使用像React、Angular等JS库，这也很有帮助。 - Vikram K