Come posso applicare il mix .rotate() a un elemento Glyph Icon di Bootstrap <i>?

Question

Sto usando <i class="icon-play icon-white"></i> e quello che vorrei ottenere è ruotarlo di 90 gradi. Anche se il resto dei mixin come .scale() funziona, ruotare non lo è. Mi sto perdendo qualcosa?

Answer 1

Come risultato del commento @Lipis, ecco il mio commento spiegato in una risposta.

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

o utilizzando mixins di Bootstrap e LessCSS:

#rotate { 
    .rotate(120deg); 
} 

tenere a mente i vecchi browser non supportano questa css.

Vedere jsfiddle per una demo.

Answer 2

Non è possibile eseguire una trasformazione su un elemento pseduo (come: prima), che è il modo in cui vengono spesso implementati i caratteri icona. Con i glifi di Bootstrap, c'è background-image: url ("../ img/glyphicons-halflings.png"); (come in quella demo di jsfiddle). Vedi anche: Applying WebKit transitions to Pseudo Elements e questo: http://css-tricks.com/transitions-and-animations-on-css-generated-content/