Question

我正在使用FontAwesome 3.1.0，这个简单的代码无法正常工作：

<a href="/">
    <!-- other html content -->
    <i class="icon-spinner icon-spin"></i>
</a>

只需将a代码更改为div，即可生效。

如何让CSS3动画有效？或者这不可能吗？我宁愿不将其更改为div并通过JS建立类似链接的行为。

更新

上面的代码实际上有效，就像在jsfiddle上一样。但它在我的页面上不起作用。必定存在一些我无法弄清楚的潜在冲突。

示例：http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released

尝试编辑a.post-agree-amount:first，其中有。当我将其更改为时，它不会生成动画。如果使用浏览器代码检查器在DOM周围移动此<a>，它仍然不会设置动画。但是，一旦我将<a>更改为<div>，它就会动画。

我正在使用Google Chrome 28.0，但在Firefox 22.0中也看到了这种行为。

Answer 1

发现问题和解决方案。

CSS3动画显然不适用于display: inline元素，而Bootstrap的css有一条规则使图标元素具有display: inline。除了图标元素 a.btn之外，Bootstrap的css有一条规则可以将display: inline-block应用于它们。

所以我们需要做的就是将display: inline-block应用于链接中的i.icon-spinner.icon-spin。

（感谢Praveen提供有用的评论）

Answer 2

您的代码有效，fiddle。但是您应该在标记之外添加图标标记anchor，否则它会超链接。

改变你的喜欢

<i class="icon-spinner icon-spin"></i>
<a href="http://google.com">Google</a>

Working Fiddle

如何在链接中放置一个旋转的fontawesome图标？

2 个答案: