字体真棒动画微调器通过背景
font awesome animated spinner through background
我在 CSS 背景中使用字体真棒旋转图标来加载页面。
/* 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>
图标在页面中渲染成功,但它是静态的。
如何使用真棒字体作为背景使用动画旋转图标?
请协助。
你应该使用 fa fa-spinner fa-spin
.
示例:
/** 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>
正确答案:更新 CSS 如下。
/* 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>
字体真棒 4.7
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
字体真棒 5+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
Font Awesome 5 Spinner 文档:
https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
Font Awesome 5 Spinner 图标列表:
我在 CSS 背景中使用字体真棒旋转图标来加载页面。
/* 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>
图标在页面中渲染成功,但它是静态的。 如何使用真棒字体作为背景使用动画旋转图标? 请协助。
你应该使用 fa fa-spinner fa-spin
.
示例:
/** 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>
正确答案:更新 CSS 如下。
/* 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>
字体真棒 4.7
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
字体真棒 5+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
Font Awesome 5 Spinner 文档:
https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
Font Awesome 5 Spinner 图标列表: