重新创建FontAwesome Spinner

Question

在我的项目中，有些用户无法看到FontAwesome图标，但我可以从最终看到它们。

我使用过这样的字体真棒图标：

<i class="fa fa-cog">

由于某些用户无法看到它们，因此我已将代码转换为使用

<span class"faCog"></span>

.faCog {
  &:before {
    font-family: 'FontAwesome';
    content: '\f013';
  }
}

我现在的问题是我想让齿轮旋转，但我似乎无法让它发挥作用。在我能够做之前

<i class="fa fa-cog fa-spin fa-1x fa-fw">

我尝试将此添加到我的faCog类但没有骰子

&:after {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

我的目标是拥有一个旋转的齿轮图标。

Answer 1

你需要使用动画。看看这个：https://www.w3schools.com/css/css3_animations.asp

.faCog.spin:before {
  font-family: 'FontAwesome';
  content: '\f013';
  display: inline-block;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="faCog spin"></span>

Answer 2

您需要创建旋转动画才能使其正常工作。

＆＃13;

＆＃13;

.faCog {
  display: inline-block;
  -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
.faCog:before {
    font-family: 'FontAwesome';
    content: '\f013';
  }

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<p>
  <strong>Normal Icon</strong>
  <br/>
  <i class="fa fa-cog fa-spin"></i>
</p>
<p>
  <strong>Custom Icon</strong>
  <br/>
  <span class="faCog"></span>
</p>

＆＃13;

＆＃13;

＆＃13;