Rotating Glyphicons / Font Awesome in Bootstrap

Question

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/<

Answer 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.

---

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