Toggling between Font Awesome styles on hover
<p>I'm an aspiring web designer and need help with an issue I'm having. I have an icon in Font Awesome that I want to change colour/style when I hover on it.</p>

<p>Here is the default style I'd like to use:</p>

<p>CSS</p>

<pre><code>.fa-circle {
  color:red;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;span class="fa-stack fa-5x"&gt;
  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
  &lt;i class="fa fa-arrow-right fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
&lt;/span&gt;
</code></pre>

<p><a href="http://jsfiddle.net/94n0zxbt/2/" rel="nofollow">http://jsfiddle.net/94n0zxbt/2/</a></p>

<p>and here is what I'd like to have it change to on hover:</p>

<p><a href="http://jsfiddle.net/94n0zxbt/5/" rel="nofollow">http://jsfiddle.net/94n0zxbt/5/</a></p>

<p>CSS</p>

<pre><code>.fa-circle {
  color:white;
  border-color: red;
  border-radius: 90px;
  border-style: solid;
}

.fa-arrow-right {
  color: red;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;span class="fa-stack fa-5x"&gt;
  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
  &lt;i class="fa fa-arrow-right fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
&lt;/span&gt;
</code></pre>

<p>Thanks,</p>

<p>Ashley</p>