Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to flip glyphicon icon

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

like image 219
Jamol Avatar asked Sep 04 '13 09:09

Jamol


People also ask

How do you rotate icons in HTML?

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

What are Glyphicons main uses?

The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. The Glyphicons are used for some texts, forms, buttons, navigation, and etc. The bootstrap has many Glphyicons but there has a standard format to display icons.


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

like image 53
Falguni Panchal Avatar answered Oct 10 '22 11:10

Falguni Panchal


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

like image 19
Jax Avatar answered Oct 10 '22 13:10

Jax