Rotating Glyphicons / Font Awesome in Bootstrap

Rotating Glyphicons / Font Awesome in Bootstrap

I’m trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).
Here’s my attempt: http://jsfiddle.net/young_greedo17/88g5P/
…which uses this code:

Add an event

… here’s the CSS:
.widgetbox {
width: 250px;
height: 250px;
background-color: black;
color: white;
text-align: center;
}
.widgetbox [class*=”icon-“] {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
transition-duration: 1.0s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.widgetbox:hover [class*=”icon-“] {
color: #24a159 !important;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

Here’s an example of what I’m looking to happen on hover (see four column widget box ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665
Obviously, the color changes, but even that doesn’t change in accordance with the parameters I’m setting for the transition in the CSS.
Thanks!

Solutions/Answers:

Solution 1:

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.

Related:  Leaflet map not showing properly in bootstrap 3.0 modal

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]`

Solution 2:

New Font awesome introduced rotate notation http://fontawesome.io/examples/

//Normal:
<i class="fa fa-shield"></i>&nbsp; normal<br>

//Rotated:
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>

//Flipped
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Solution 3:

The font-awesome.css file sets display: inline for your selector: [class^="icon-"],
[class*="icon-"]
. You can see this at line 161 of the CSS file:

[class^="icon-"],
  [class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
} 

Therefore you need to set the .widgetbox [class*="icon-"] to have a property display: block;
http://jsfiddle.net/88g5P/6/

Related:  How to customize Bootstrap typeahead layout/function for more than just text?

EDIT: after looking up the differences between display:block; and display:inline-block;, I came upon this simple visual answer on Stack overflow. Based on this answer, it’s probably better to use display:inline-block

Solution 4:

you need to override the icon’s display setting, since the rotation won’t work on inline elements

.widgetbox [class*="icon-"] {

     ...

     display:block;
}

Solution 5:

In your particular case the issue is that the icons you are using have display: inline-block, I added display:block to the custom CSS and it now works.

References