3

我使用的是 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在有<i class="icon-thumbs-up"></i>. 当我将其更改为 时<i class="icon-spinner icon-spin"></i>，它不会动画。如果您<a>使用浏览器代码检查器在 DOM 中移动它，它仍然没有动画。但是一旦我更改<a>为<div>，它就会动画。

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

4

2 回答 2

16

找到问题和解决方案。

CSS3 动画显然不适用于display: inline元素，并且 Bootstrap 的 css 有一个规则，使<i>图标元素具有display: inline. 除了里面<i>的图标元素，Bootstrap 的 css 有一个规则适用于它们。 a.btndisplay: inline-block

所以我们需要做的就是应用display: inline-block到i.icon-spinner.icon-spin链接里面的那些。

（感谢Praveen的有用评论）

于 2013-07-25T10:03:47.263 回答
0

你的代码有效，小提琴。但是您应该在标签<i>之外有图标标签anchor，否则它将被超链接。

像这样改变你

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

工作小提琴

于 2013-07-24T14:28:18.997 回答