How to flip the glyphicon icon

Question

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

Refer this link it works http://stackoverflow.com/questions/18604829/rotating-glyphicons-font-awesome-in-bootstrap — anand, Jan 10 '14 at 15:05
Rotating icons that are use pseudo before/after content http://stackoverflow.com/questions/9779919/css-rotate-a-pseudo-after-or-before-content — Chris Marisic, Apr 12 '16 at 15:56

score 103 · Accepted Answer · edited Jan 24 '17 at 18:16

103

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

edited Jan 24 '17 at 18:16

random_user_name

25,694
7
76
115

answered Sep 04 '13 at 09:16

Falguni Panchal

8,873
3
27
33

2

This didn`t work. I am not using fontawesome. I am using glyphicons – Jamol Sep 04 '13 at 10:13
2

This worked for me and I'm using glyphicons (via twitter bootstrap) too – corinnaerin Jul 14 '15 at 20:19
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: https://css-tricks.com/ordering-css3-properties/ – Berty Feb 09 '16 at 10:41
1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: ``. Sorry for coding in the comments, my edits were rejected. – Leopoldo Sanczyk Dec 29 '16 at 00:59
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 – getName Jan 17 '19 at 15:58

score 19 · Answer 2 · answered Jan 28 '15 at 15:20

19

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

answered Jan 28 '15 at 15:20

Jax

1,839
3
18
30

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right? – Furkan Gözükara Jun 28 '16 at 13:23
@MonsterMMORPG not that I'm aware of. – Jax Jun 28 '16 at 18:27

How to flip the glyphicon icon

2 Answers2

Linked