title: CSS, changing hover effect of icon font in a link
body: <p>I have a nav element like so...</p>
  
  <pre><code>&lt;ul class="options-list"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon icon-print"&gt;&lt;/i&gt; Print This&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon icon-envelope-alt"&gt;&lt;/i&gt; Send This&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon icon-bookmark"&gt;&lt;/i&gt; Bookmark This&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon icon-star"&gt;&lt;/i&gt; Favourite This&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon icon-heart"&gt;&lt;/i&gt; Like This&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am using Font Awesome to generate the icons. The CSS is as follows:</p>
  
  <pre><code>.options-list li a {
    color: #888;
    display: block;
    border-bottom: 1px solid #e7e7e7;
    padding-top: 7px;
    padding-right: 0;
    padding-bottom: 7px;}
  
  .options-list li:first-child a {margin: -15px 0 0 0;}
  .options-list li:last-child a {border: none;}
  .options-list li a:hover {color: #444;}
  </code></pre>
  
  <p>Obviously this gives me a change of text (and icon) colour on hover to #444. Now what I would like to do, is keep that, but have the icon change to a different colour on hover. (i.e text changes to #444, icons changes to #AE0000 on hover)</p>
  
  <p>I'm not sure of the best way to tackle it. (Still quite new to CCS/HTML so any help mucho appreciated!)</p>
  
  <p>Thanks!</p>