Css 在引导中旋转字形图标/字体

我试图让我的引导站点中的图标在悬停时旋转（除了改变颜色）

以下是我的尝试：

…它使用此代码：

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

下面是我希望在hover上发生的一个示例（请参见四列小部件框ATF）：

很明显，颜色会改变，但即使这样，也不会随着我在CSS中设置的过渡参数而改变

---

谢谢

问题是您试图转换

内联

元素-这是不可能的

您将向内联块显示glyphicon的显示值

---

以下是来自以下网站的详细信息：

可转换元素

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

• 一种元素，其布局由CSS框模型控制，CSS框模型为块级或原子内联级元素，或其显示属性计算为表行、表行组、表页眉组、表页脚组、表单元格或表标题[CSS21]

• SVG名称空间中的一个元素，不受CSS框模型的控制，CSS框模型具有属性transform、'patternTransform'或gradientTransform[SVG11]`

---

选择器的

font awesome.css

文件集

显示：inline

：

[class^=“icon-”，
[class*=“icon-”]

。您可以在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

编辑：查找
display:block之间的差异后和
显示：内联块，我偶然发现了这个。根据这个答案，最好使用
display:inline block
您需要覆盖图标的显示设置，因为旋转对内联元素不起作用

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

     ...

     display:block;
}

在您的特定情况下，问题在于您使用的图标具有
显示：内联块
，我将
显示：块
添加到自定义CSS中，现在它可以工作了。
新字体引入了旋转符号（运行下面的代码片段以查看其实际操作）

只需从fa-rotate-90（90或180270）和fa-flip-horizontal（水平或垂直）添加一个修改器类

正常






正常：

正常


旋转：

fa-rotate-90

fa-rotate-180

fa-rotate-270


翻转：

fa水平翻转

fa水平翻转


旋转和翻转：

fa翻转垂直fa-rotate-90
尝试将-webkit转换属性设置为“全部”+1好主意。仅供参考，您有一个不在SCSS中解析的o类型。将最后一行从
.rotate（360）
更改为
transform:rotate（360）
，然后它将在scss转换器中解析。尽管在safari或opera中仍然不受支持（适用于当前的safari beta版）：我没有，但这篇文章最近已更新。不过我对歌剧不太清楚。
.widgetbox [class*="icon-"] {

     ...

     display:block;
}

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