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

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