如何将.rotate()混合应用于Bootstrap的<i> Icon Glyph元素？

Question

我正在使用<i class="icon-play icon-white"></i>,我希望实现的是将其旋转90度.虽然其余的mixins喜欢.scale()工作,但旋转不是.我错过了什么吗？

Answer 1

作为@Lipis评论的结果,这里是我在一个答案中解释的评论.

纯CSS解决方案:

<i class="icon-search" id="rotate"></i>

#rotate {  
  -webkit-transform:rotate(120deg);
  -moz-transform:rotate(120deg);
  -o-transform:rotate(120deg);
  /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
  -ms-transform:rotate(120deg);        
}

或者使用Bootstrap的mixins和LessCSS:

#rotate {  
  .rotate(120deg); 
}

请记住,旧浏览器不支持此CSS.

有关演示,请参阅jsfiddle.