在Bootstrap中旋转字形图标/Font Awesome

Question

我想让我的Bootstrap站点中的Glyphicons在悬停时旋转（除了更改颜色之外）。

这是我的尝试：http://jsfiddle.net/young_greedo17/88g5P/

...使用以下代码：

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

...这是CSS代码：

.widgetbox {
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    text-align: center;
}
.widgetbox [class*="icon-"] {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
    color: #24a159 !important;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

这是我希望在悬停时发生的示例（请参见四列小部件框架ATF）：http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

显然，颜色会变化，但即使如此，它也不会根据CSS中设置的过渡参数进行更改。

谢谢！

- Tim McClure

---

尝试将 -webkit-transition-property 设置为 'all'。 - Code Uniquely

+1 好主意。顺便说一句，你有一个拼写错误，在 SCSS 中无法解析。将最后一行从 .rotate(360) 更改为 transform:rotate(360)，然后它就可以在 SCSS 转换器中解析了。 - eduncan911

Answer 1

Font Awesome 新增了 rotate 表示法（运行下面的代码段查看效果）http://fontawesome.io/examples/

只需要从 fa-rotate-90（90、180、270）和 fa-flip-horizontal（水平或垂直）中添加一个修饰类即可。

<i class="fa fa-head-side-mask"></i>normal<br>
<i class="fa fa-head-side-mask fa-rotate-90"></i>
<i class="fa fa-head-side-mask fa-flip-horizontal"></i>
<i class="fa fa-head-side-mask fa-rotate-90 fa-flip-horizontal"></i>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<br>Normal:<br>

    <i class="fa fa-head-side-mask"></i>normal<br>

<br>Rotated:<br>

    <i class="fa fa-head-side-mask fa-rotate-90"></i>fa-rotate-90<br>
    <i class="fa fa-head-side-mask fa-rotate-180"></i>fa-rotate-180<br>
    <i class="fa fa-head-side-mask fa-rotate-270"></i>fa-rotate-270<br>
    
<br>Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-head-side-mask fa-flip-vertical"></i>  fa-flip-horizontal<br>
    
    
<br>Rotated and Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-vertical fa-rotate-90"></i>fa-flip-vertical fa-rotate-90

- drpawelo

Answer 2

问题在于你试图转换一个行内元素，这是不可能的。

你需要更改 glyphicon 的显示值为内联块。

---

以下是来自CSS转换模块的详细信息:

可转换元素

可转换元素是指以下类别之一的元素：

• 其布局由CSS盒子模型管理的块级或原子内联级元素，或其display属性计算为table-row、table-row-group、table-header-group、table-footer-group、table-cell或table-caption [CSS21]

• 在SVG命名空间中且不受CSS盒子模型管理的具有transform、'patternTransform'或gradientTransform属性的元素[SVG11]

- Adrift

---

尽管在当前的Safari beta中可以使用（但仍不支持Safari或Opera）：http://css-tricks.com/transitions-and-animations-on-css-generated-content/ - dc5

我没有更新文章，但是文章最近已经被更新过了。不过我不确定关于 Opera。 - dc5

Answer 3

font-awesome.css文件为选择器[class^="icon-"], [class*="icon-"]设置了display: inline。您可以在CSS文件的第161行看到：

[class^="icon-"],
  [class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
} 

因此，您需要将 .widgetbox [class*="icon-"] 设置为具有属性 display: block; http://jsfiddle.net/88g5P/6/ 编辑：在查阅了display:block;和display:inline-block;之间的区别之后，我找到了这个关于stackoverflow的简单可视化答案。根据这个答案，最好使用display:inline-block。

- ajiang

Answer 4

你需要覆盖图标的显示设置，因为旋转不会在行内元素上起作用。

.widgetbox [class*="icon-"] {

     ...

     display:block;
}

- jbr3zy

Answer 5

在您的特定情况下，问题在于您使用的图标具有 display: inline-block，我在自定义CSS中添加了 display:block，现在可以正常工作。

- Timothy Walters