google icons 的使用 和 css 设置图标为 loading 状态
google icons 的使用：
google icons 图标库：https://fonts.google.com/icons
1、外部引入：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2、HTML部分:
<span class="material-icons">access_alarm</span>
<span class="material-icons">sd_storage</span>
<span class="material-icons">search</span>
<span class="material-icons">fingerprint</span>
设置图标为 loading 状态：
1、HTML部分：
<div>
<span class="material-icons md-48 fa-spin">refresh</span>
<span class="material-icons md-48 fa-spin">autorenew</span>
<span class="material-icons md-48 fa-pulseNode">autorenew</span>
<span class="material-icons md-48 fa-spin">rotate_right</span>
<span class="material-icons md-48">published_with_changes</span>
<span class="material-icons md-48">model_training</span>
<span class="material-icons md-48 fa-pulse">hourglass_bottom</span>
</div>
2、CSS 部分：
.material-icons.md-18 {
font-size: 18px;
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-36 {
font-size: 36px;
}
.material-icons.md-48 {
font-size: 48px;
color: darkblue;
}
/* */
.material-icons.md-dark {
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
/* 白色 */
.material-icons.md-light {
color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
.fa-spin {
-webkit-animation: fa-spin 1.5s infinite linear;
animation: fa-spin 1.5s infinite linear;
}
.fa-pulseNode {
-webkit-animation: fa-spin 1.5s infinite steps(8);
animation: fa-spin 1.5s infinite steps(8);
}
.fa-pulse {
-webkit-animation: fa-spin 2s infinite steps(2);
animation: fa-spin 2s infinite steps(2);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
