是否可以在css文件中改變Font Awesome的每個圖標的顏色？

-3

我的頁面使用了很多Font Awesome圖標，它們都是藍色的。不過，我想將它們全部更改爲紅色以適合網站主題。你如何去做這件事？是否可以在css文件中改變Font Awesome的每個圖標的顏色？

CSS文件看起來是這樣的：

font-face { 
    font-family:'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); 
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-  
webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome- webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome- webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); 
font-weight: normal; 
    font-style: normal; 
} 
.fa { 
    display: inline-block; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

我已經試過了顏色屬性，但是這並不產生任何影響。

來源

2015-05-26 Damien Dunne

「色」？請嘗試使用美式「顏色」。 –

對不起，我寫錯了我已經嘗試過美國拼寫 –

你可以把你的HTML代碼放入你的問題。或者我可以看到實際問題的網址？ –

字體真棒「圖標」是字符。他們的顏色通常根據用途設置，而不是在Font Awesome css文件中。

找到圖標插入頁面的位置。元素可能擁有類或ID，然後在相關CSS文件中添加CSS規則：

#relevant-id { 
    color: red; 
}

或者更好的找到現有的藍色被定義在哪裏，所以你會避免規則的選擇性問題。你可以通過the developer tools of your browser瞭解到。

來源

2015-05-26 09:48:05

謝謝我已經試過這樣做每個類以及試圖爲通用的CSS文件，但仍然沒有改變。 –

@DamienDunne查看開發人員工具，查看圖標目前爲藍色的原因。 –

我該怎麼做？ –

試試這個

添加新的規則在相關CSS文件

.fa{ 
color: red !important; 
}

來源

2015-05-26 11:04:04 user4720824

是否可以在css文件中改變Font Awesome的每個圖標的顏色？

回答

相關問題