Question

我正在写一个不使用bootstrap的网站。因此，为了使用font-awesome，我使用以下css规则

CSS

[data-icon]:before {
  font-family: 'FontAwesome';
  font-size: 90%;
  color: white;   
  margin-right: .5em;
  content: attr(data-icon);
  speak: none;
  z-index: 11;
}
.icon-alone {
  display: inline-block;
}

我正在HTML中使用它：

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  <span data-icon="&#xf110;"></span>
</body>

现在我想让图标旋转（如font-awesome示例页面中的示例所示。

使用css规则是否可行......

非常感谢

Answer 1

是的，他们使用以下内容：

@-moz-keyframes spin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(359deg);
}
}
.fa-spin {
    animation: 2s linear 0s normal none infinite spin;
}

（可能还有其他供应商的前缀，但它们似乎嗅探浏览器并只发送适当的一个。）

Answer 2

我相信这是你正在寻找的东西：

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

我猜你想让'loading'图标无限旋转。如果你想使用javascript获得这个效果，你可以使用jQuery和.css方法与setInterval。我相信这是更好的方法，因为我听说他们在其他浏览器上遇到了jsFiddle的问题而不是'webkit'。

动画FontAwesome在Css

2 个答案: