Zurb Foundation 6.3のフォントAwesomeアイコンの色をCSSホバーで変更します

Question

Zurb Foundation 6.3のページ上に、スタックされたフォントAwesomeソーシャルアイコン（つまり、アイコンが円の上にあります）の円の色を変更したいhoverプロパティを使用して灰色から赤色に変わります。

私はさまざまなソリューションを研究しましたが、何も機能しません。 （アイコンを整列させるためにインラインブロックプロパティを指定することはできないと分かっています。なぜなら、ホバープロパティが機能しないので、代わりにulタグとliタグを使用したからです）。

Font Awesomeブートストラップではなく財団で？私はこれに関する文書を見つけることができません。私はそれが財団とうまくいくと考えています。どんな助けでも大歓迎です。

おかげで、 スティーブJ.

は、ここに私のコードです：

CSS：

.social fa-circle { 
color: #808080; 
} 

.social fa-circle:hover { 
color: #990000; 
} 

HTML：

<div class="row"> 
    <div class="small-12 columns social"> 
     <ul> 
      <li> 
       <a href="#" class=""> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x style="color: gray;"></i> 
         <i class="fa fa-facebook fa-fw fa-stack-1x fa-inverse" 
      style="font-size: 1.2rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 

      <li> 
       <a href="#"> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x"></i> 
         <i class="fa fa-instagram fa-fw fa-stack-1x fa-inverse" style="font-size: 1.25rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 

      <li> 
       <a href="#"> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x" ></i> 
         <i class="fa fa-envelope-o fa-fw fa-stack-1x fa-inverse" style="font-size: 1.2rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

私は、問題は、あなたが不足していると思いfaクラスの期間。試してください：

.social .fa-circle { 
color: #808080; 
} 

.social .fa-circle:hover { 
color: #990000; 
}