how to flip glyphicon icon

Question

Is there any way to flip glyphicon. I found Flip an Image css trick, but that does not work for glyphicon. Please any suggestions

Solution 1

Like this

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

OR

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

Solution 2

Using glyphicons managed to make this work like so:

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

see JSFiddle here

Comments

[Nitesh]

Can you show the code that you have tried?

[anand]

Refer this link it works stackoverflow.com/questions/18604829/…

[Chris Marisic]

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

[Jamol]

This didn`t work. I am not using fontawesome. I am using glyphicons

[corinnaerin]

This worked for me and I'm using glyphicons (via twitter bootstrap) too

[Berty]

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

[MonsterMMORPG]

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

[Jax]

@MonsterMMORPG not that I'm aware of.

[Leopoldo Sanczyk]

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"><span class="glyphicon glyphicon-repeat icon-flipped"></span></a>. Sorry for coding in the comments, my edits were rejected.

[getName]

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw