How to Flip Glyphicon Icon

How to flip the glyphicon icon

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

Rotating Glyphicons / Font Awesome in Bootstrap

The problem is that you're trying to transform an inline element - this isn't possible.

You'll need to change the display value of the glyphicon to inline block.

---

Here are the details from the CSS Transforms Module:

transformable element

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`

flip icon using css3

DEMO

CSS changes

.paraCnt:after {
  left: auto;
  right: -50px;
  -webkit-transform: scaleX(-1); /**Add this**/
  transform: scaleX(-1); /**Add this**/
}

How to flip iron-icon vertically in css

I found a solution by using:

.my-class {
    transform: rotate(180deg);
}

why is glyphicon shopping cart facing left - bootstrap

No idea why it's facing left however you could use the following CSS:

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

Then in the HTML: <i class="icon-shopping-cart icon-flipped"></i>

Though an easier method would be to use Font Awesome and take advantage of the rotate notation for any icons you want to change the direction of.

<i class="fa fa-shopping-cart fa-rotate-180"></i>

Though as a note the Shopping Cart in Font Awesome actually faces right.

How to animate the chevron glyphicon when toggling a bootstrap 3 panel?

Instead of changing content you can try with transition and transform: rotate() to get it done. check below snippet for reference.

.panel-heading .accordion-toggle:after {  font-family: 'Glyphicons Halflings';  content: "\e114";  float: right;  color: grey;  transition: all 0.5s ease;}
.panel-heading .accordion-toggle.collapsed:after {  /*content: "\e080";*/  transform: rotate(180deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="panel-group" id="accordion">  <div class="panel panel-default">    <div class="panel-heading">      <h3 class="panel-title">        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#importationCollapse">Importation</a>      </h3>    </div>    <div id="importationCollapse" class="panel-collapse collapse in">      <div class="panel-body">        <p>Content: blahblah</p>      </div>    </div>  </div></div>

---

Related Topics