Umschalten zwischen Schriftart Super Stile bei Hover

Question

Ich bin ein aufstrebender Webdesigner und brauche Hilfe bei einem Problem, das ich habe. Ich habe ein Symbol in Font Awesome, dass ich Farbe/Stil ändern möchte, wenn ich darauf schwebe.

Hier ist der Standard-Stil ist das ich verwenden möchte:

CSS

.fa-circle { 
    color:red; 
} 

HTML:

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i> 
</span> 

http://jsfiddle.net/94n0zxbt/2/

und hier ist das, was ich gerne hätte Um es in Hover zu ändern:

http://jsfiddle.net/94n0zxbt/5/

CSS

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

.fa-arrow-right { 
    color: red; 
} 

HTML

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i> 
</span> 

Danke,

Ashley

Answer 1

Der Grund für die normal: Hover CSS nicht funktioniert ist, dass die <i> Tags sind einander überlappen. Wenn Sie auf den Pfeil <i> Tag innerhalb des Kreises <i> gesetzt wird es funktionieren:

http://jsfiddle.net/pjpwea/94n0zxbt/6/

Sie werden feststellen, dass der Pfeil doppelt so groß geworden ist (ich nehme an, das von der ‚2x‘ Klasse ist), nicht super vertraut mit Font Awesome, aber es gibt wahrscheinlich eine einfache Lösung.