google icons 的使用 和 css 设置图标为 loading 状态

google icons 的使用：

google icons 图标库：https://fonts.google.com/icons

1、外部引入：

　　

2、HTML部分:

    access_alarm     sd_storage     search     fingerprint         设置图标为 loading 状态：   1、HTML部分：　  　
        refresh         autorenew         autorenew         rotate_right         published_with_changes         model_training         hourglass_bottom     
  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);             }         }

相关

标签