Changing glyphicon on hover (bootstrap)
<p>I have an icon:</p>

<pre><code>&lt;span class='glyphicon glyphicon-heart-empty' aria-hidden='true'&gt;&lt;/span&gt;
</code></pre>

<p>On hover, I want the glyphicon to change from <code>heart-empty</code> to:</p>

<pre><code>&lt;span class='glyphicon glyphicon-heart' aria-hidden='true'&gt;&lt;/span&gt;
</code></pre>

<p>And then if the user clicks the icon, the button will have the glyphicon <code>heart</code> and if the users clicks the icon again, it will put its state back to <code>heart-empty</code>. </p>

<p>I have seen this JSfiddle <a href="http://jsfiddle.net/GCme2/4/" rel="nofollow">here</a> which on hover, displays an icon, whereas I want it to completely change the icon. I have tried to use the approach in the JSfiddle, but it I cannot get it to do what I want.</p>