Css中的动画FontAwesome

我正在编写一个不使用引导程序的网站。因此，为了使用字体真棒，我使用了下面的CSS规则Css中的动画FontAwesome

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规则的可能性吗？

非常感谢

来源

2014-01-20 Ismail Moghul

是的，他们使用以下命令：

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

（可能与其他厂商的前缀为好，但他们似乎嗅出浏览器只发送一个合适的。）

来源

2014-01-20 08:26:00

谢谢，但它似乎围绕偏离中心点（即在中心右侧）旋转...有什么办法可以解决这个问题... –

你必须检查[相关CSS代码]（http：// fontawesome.io/assets/font-awesome/css/font-awesome.css）。 –