更改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

回答

相關問題