我通过 CSS 背景使用 font Awesome 旋转图标来加载页面。
/* 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>
图标在页面中成功呈现,但它是静态的。
如何使用以 font Awesome 作为背景的动画旋转图标?
请协助。
你应该使用fa fa-spinner fa-spin
.
See: 很棒的字体示例 https://fortawesome.github.io/Font-Awesome/examples/
Example:
/** CSS **/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css');
<!-- HTML -->
<div class="fa fa-spinner fa-spin"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)