在懸停的字體真棒樣式之間切換

Question

我是一個有抱負的網頁設計師，需要關於我遇到的問題的幫助。我在Font Awesome中有一個圖標，當我將它懸停時，我想更改顏色/樣式。

這裏是默認的風格，我想用：

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/

這裏是想我將其更改爲懸停：

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> 

感謝，

阿什利

Answer 1

正常的原因是：懸停的CSS不工作就是<i>標籤是相互重疊。如果你把箭頭<i>標籤圓<i>內它會工作：

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

你會發現，箭頭已經變得兩倍大（我想這是從「2X」類），不超熟悉Font Awesome，但可能有一個簡單的解決方法。