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

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

我研究过不同的解决方案，但没有任何工作。（我知道你不能指定内联块属性来对齐图标，因为它保持悬停属性不起作用，所以我用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>

来源

2017-08-07 Steve Juliusson

我认为这个问题是你错过了期间为fa类。尝试：

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

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

来源

2017-08-10 09:48:46 spiral

好抓;这很简单。但是，它没有工作。代码一直在做什么（并且还在做）正在让我的图标圈显示栗色，然后在悬停时变成红色。这看起来很好，我可以忍受它，但它不是我编码的。我希望灰色的圆圈在悬停时变成栗色。顺便说一下，我在中的Font Awesome自定义代码是： –

然后，可能会有其他样式覆盖这些声明。你尝试过使用！重要吗？发布网址，我们可以帮助您排除故障。 – spiral

我尝试在悬停CSS中添加！important，但它没有起作用： .social .fa-circle：hover { \t color：＃990000！important; } –

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

回答

相关问题