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
-
Can you show the code that you have tried?– NiteshSep 4, 2013 at 9:18
-
Refer this link it works stackoverflow.com/questions/18604829/…– anandJan 10, 2014 at 15:05
-
Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…– Chris MarisicApr 12, 2016 at 15:56
Add a comment
|
2 Answers
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
-
2
-
2This worked for me and I'm using glyphicons (via twitter bootstrap) too Jul 14, 2015 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: css-tricks.com/ordering-css3-properties– BertyFeb 9, 2016 at 10:41
-
1@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. Dec 29, 2016 at 0: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– getNameJan 17, 2019 at 15:58
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
-
i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right? Jun 28, 2016 at 13:23
-