如何让图标旋转

Question

我正在尝试 bootstrap 并尝试让图标旋转，文本保持静止但仍在按钮标签内。

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


 <button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'>Like</i></button>
    </div>

Answer 1

从图标制作器中删除文本:)

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


 <button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
    </div>

Answer 2

您可以将文本放在 i 标签之外

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


 <button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
    </div>

Answer 3

就这么简单

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

如果您希望图标反向旋转，同时保持浏览器的支持，请使用此

.fa-spin-reverse {
  -webkit-animation: fa-spin-reverse 2s infinite linear;
  animation: fa-spin-reverse 2s infinite linear;
}
@-webkit-keyframes fa-spin-reverse {
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin-reverse {
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

Answer 4

用此代码替换按钮代码：

<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>

注意：在使用图标库时始终将文本置于 i 标签之外

如何让图标旋转

How to just get the icon to spin

html

css

favicon

twitter-bootstrap