title: Rotating Glyphicons / Font Awesome in Bootstrap
body: <p>I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).</p>
  
  <p>Here's my attempt: <a href="http://jsfiddle.net/young_greedo17/88g5P/">http://jsfiddle.net/young_greedo17/88g5P/</a></p>
  
  <p>...which uses this code:</p>
  
  <pre><code>&lt;div class="widgetbox"&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;div class="icon-calendar icon-large"&gt;&lt;/div&gt;
      &lt;h5&gt;Add an event&lt;/h5&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>... here's the CSS: </p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>Here's an example of what I'm looking to happen on hover (see four column widget box ATF): <a href="http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665">http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665</a></p>
  
  <p>Obviously, the color changes, but even that doesn't change in accordance with the parameters I'm setting for the transition in the CSS.</p>
  
  <p>Thanks!</p>