字体神器（Font Awesome）的CSS正在覆盖我的CSS

Question

我正在处理一个页面 - 点击此处查看链接。所有图标都应该具有.side-icon的字体大小：

.side-icon{ 
    font-size:28px;
}

但是font-awesome.css中的样式正在覆盖此内容，无论我在布局中包含库的位置如何。

目前，我已经在一个工作表的顶部使用@import包含了css（font-awesome-fix.css）的解决方法，但我无法完全删除“font：normal normal normal 14px / 1 FontAwesome;”。

请帮忙！

- asoxus

Answer 1

使您的选择器更具体：

.side-icon.fa

查看此处，了解选择器优先级计算方法。

- Brewal

---

这解决了！我盯着我的样式表看了一个小时，把头发都拔光了。谢谢！ - asoxus

@asoxus 太好了！我添加了一份文档，以便理解为什么这个可以工作。 - Brewal

Answer 2

嘿，你应该将目标对准 before 元素：

.side-icon:before{ 
    font-size:28px;
}

- Mat

Answer 3

也许尝试为需要更改字体的特定.side-icon添加一个id。
CSS：

.side-icon #id_goes_here{
font-size:14px;
}

希望这能帮到你！

- Jamieson Dube

Answer 4

非常有用的"!important"通常能帮助我解决这样的问题，或者至少确定根本问题：

.side-icon{ 
   font-size:28px !important;
}

- deebs

---

http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/ - Brewal

!important是魔鬼！ - asoxus

是的，但它有时可以帮助您解决问题... 然后只需将其删除。 - deebs

Answer 5

尝试使用更具体的CSS来覆盖其他样式。这可能包括添加类或ID，以便您可以将它们链接在一起以进行覆盖。

示例：

.side-icon.foo{styles}
#bar.side-icon{styles}

如果仍然无法解决问题，您可能需要使用!important覆盖来增加另一层特定性。我不建议立即使用它，但这主要是因为我更喜欢编写更具体的代码，而不是到处使用!important。

例如：

.side-icon{style:value!important;}

如果这两个方法都不管用，可能会有其他问题影响你的样式。

- skrawler

Answer 6

这是因为 CSS 优先级规则生效了：

当选择器具有相等的优先级值时，最后一个规则是起作用的。

因此，在最顶部位置包含您的文件并没有帮助，因为 font-awesome.css 后来被包含进来了，由于 .side-icon 和 .fa 都是同一元素上的类，所以浏览器选择了由 font-awesome.css 定义的 .fa，因为它是最新的字体大小定义。

因此，为了解决这个问题，请在 font-awesome.css 后面包含您的 font-awesome-fix.css，或者您可以在包含 font-swesome.css 的行之后使用内联样式。

<style>
  .side-icon {
     font-size: 28px;
  }
</style>

或者在同一文件中覆盖.fa字体声明（如果您可以控制它），确保字体大小覆盖在原始声明之后

或者使用几种更具体的方法之一（请参见CSS特异性[1]）

[1] http://www.w3.org/TR/selectors/#specificity

- thanix