How can I apply .rotate() mixing to an <i> Icon Glyph element of Bootstrap?

Question

I am using <i class="icon-play icon-white"></i> and what I would like to achieve is to rotate it 90 degrees. Although the rest of mixins like .scale() work, rotate is not. Am I missing something?

Answer 1

As an result of @Lipis comment, here is my comment explained in an answer.

Pure CSS solution:

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

Or using Bootstrap's mixins and LessCSS:

#rotate {  
  .rotate(120deg); 
}

Keep in mind older browsers don't support this css.

See jsfiddle for a demo.