2013-09-04 27 views
29

Czy istnieje sposób, aby przełączyć glify. Znalazłem Flip an Image sztuczkę css, ale to nie działa w przypadku glifotypu. Zadowolić wszelkie sugestiejak przełączyć ikonę glifotypu

+0

można pokazać kod, który trzeba wypróbowany? – Nitesh

+0

sprawdź ten link działa http://stackoverflow.com/questions/18604829/rotating-glyphicons-font-awesome-in-bootstrap – anand

+0

Obrotowy ikony, które mają zastosowanie pseudo przed/po zawartości http: // stackoverflow. com/questions/9779919/css-rotate-a-pseudo-after-or-before-content –

Odpowiedz

53

Ci się to

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a> 

CSS

.icon-flipped { 
    transform: scaleX(-1); 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -ms-transform: scaleX(-1); 
} 

LUB

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

+2

To nie zadziałało. Nie używam fontawesome. Używam glifphonów – Jamol

+2

To działało dla mnie i używam gliffonów (poprzez twitter bootstrap) też – corinnaerin

+0

Powinieneś pamiętać, aby umieścić prawdziwą właściwość css na końcu listy, ponieważ może to w niektórych przypadkach spowodować różnice w renderowaniu: https: //css-tricks.com/ordering-css3-properties/ – Berty

14

Korzystanie glyphicons udało się dokonać tej pracy tak:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span> 

CSS

#my-glyphicon { 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
} 

zobaczyć JSFiddle tutaj

+0

Życzę bardziej eleganckiego rozwiązania za pośrednictwem klasy embedded. więc bootstrap nie ma takiej klasy do obracania się w prawo? – MonsterMMORPG

+0

@MonsterMMORPG nie jestem tego świadomy. – Jax

Powiązane problemy