Question

我的页面使用了很多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;
}

我尝试了颜色属性，但这没有任何效果。

Answer 1

Font Awesome＆＃34; icons＆＃34;是人物。它们的颜色通常根据用途设置，而不是在Font Awesome css文件中设置。

查找页面中插入图标的位置。元素可能包含类或id，然后在相关的CSS文件中添加CSS规则：

#relevant-id {
    color: red;
}

或者更好：找到定义现有蓝色的位置，这样您就可以避免规则选择性问题。您可以使用the developer tools of your browser了解这一点。

Answer 2

试试这个

在相关的CSS文件中添加新规则

.fa{
color: red !important;
}

是否可以在css文件中更改Font Awesome的每个图标的颜色？

2 个答案: