更改Zurb Foundation 6.3中的Font Awesome图标的颜色，使用css hover

Question

我想更改Zurb Foundation 6.3页面中我堆叠的Font Awesome社交图标（即，图标位于圆圈顶部）中圆圈的颜色，使用悬停属性从灰色变成红色。

我研究过不同的解决方案，但没有任何工作。 （我知道你不能指定内联块属性来对齐图标，因为它保持悬停属性不起作用，所以我用ul和li标签代替。）

是问题所在，因为我使用了Font Awesome在基金会而不是在Bootstrap？我找不到任何文件;我认为它会与基金会合作。任何帮助将非常感激。

谢谢你，史蒂夫 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; 
}