title: on hover for icon-caret-down
body: <p>Is it possible to add onhover effect to icon-caret-down? I used the css for icon-caret down. My code is as follows:</p>
  
  <pre><code>.icon-caret-down:before{
    content:"\f0d7";
    font-family:'fontawesome-alloy';
    speak:none;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    vertical-align: baseline;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0; 
  }
  </code></pre>
  
  <p>To add some effect on hover i tried but did not work</p>
  
  <pre><code>.icon-caret-down:before:hover{
      color:red;
   }
  </code></pre>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;span id="idofspan" onclick="somefun()"&gt;&lt;i class="icon-caret-down"&gt;&lt;/i&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Thanks</p>