创建字体真棒微调器答案

【问题标题】：Recreate FontAwesome Spinner创建字体真棒微调器
【发布时间】：2017-12-21 15:19:22
【问题描述】：

在我的项目中，一些用户看不到 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%;
}

我的目标是制作一个旋转的齿轮图标。

【问题讨论】：

标签： css font-awesome

【解决方案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>

【讨论】：

【解决方案2】：

您需要创建一个旋转动画来完成这项工作。

.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);
  }
}

<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>

【讨论】：