字体真棒动画微调通过背景 [英] font awesome animated spinner through background
本文介绍了字体真棒动画微调通过背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在通过CSS背景使用超棒的自旋图标来加载页面.
I am using font awesome spin icon through CSS background for loading the page.
/* Styles go here */
.loading-icon {
position: relative;
width: 20px;
height: 20px;
margin:50px auto;
}
.loading-icon:before {
content: "\f110";
font-family: FontAwesome;
font-size:20px;
position: absolute;
top: 0;
}<!DOCTYPE html>
<html>
<head>
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loading-icon"></div>
</body>
</html>该图标已在页面中成功呈现，但它是静态的.如何使用以真棒字体为背景的动画旋转图标?请协助.
The icon is rendering successfully in the page, but it is a static. How can I use the animated spinning icon using font awesome as a background? Kindly assist.
推荐答案
正确的答案:更新CSS，如下所示.
Correct answer: Update CSS as given below.
/* Styles go here */
.loading-icon {
position: relative;
width: 20px;
height: 20px;
margin:50px auto;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.loading-icon:before {
content: "\f110";
font-family: FontAwesome;
font-size:20px;
position: absolute;
top: 0;
}<!DOCTYPE html>
<html>
<head>
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loading-icon"></div>
</body>
</html>这篇关于字体真棒动画微调通过背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
