Font Awesome CSS 覆盖了我的 CSS

Question

我正在处理页面 - click here for link。这些图标都应该具有 .side-icon 的字体大小：

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

但是 font-awesome.css 中的样式覆盖了它，无论我在布局中的哪个位置包含该库。

目前，我使用@import 将css 包含在围绕sheet (font-awesome-fix.css) 的顶部，但我无法获取'font: normal normal normal 14px/1 FontAwesome;' 完全消失。

请帮忙！

Answer 1

使您的选择器更具体：

.side-icon.fa

请参阅here如何计算选择器的优先级。

Answer 2

也许可以尝试将 id 添加到您需要更改字体的特定 .side-icon。
CSS:

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

希望对您有所帮助！

Answer 3

非常有帮助的“!important”通常可以帮助我解决这样的问题，或者至少可以确定根本问题：

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

Answer 4

嘿，你应该定位 before 元素：

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

Answer 5

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

示例：

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

如果仍然不起作用，您可能需要使用 !important 覆盖来添加另一层特异性。我不建议立即使用它，但这主要是因为我更喜欢更具体地编写代码，而不是到处使用 !important。

示例：

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

如果这些都不起作用，则可能是其他问题影响了您的样式。

Answer 6

这是因为 CSS 特异性规则生效：

When selectors have an equal specificity value, the latest rule is the one that counts.

因此，将您的文件放在最上面的位置并没有帮助，因为 font-awesome.css 稍后会被包含，而且 .side-icon 和 .fa 都在同一元素上类，由 font-awesome.css 定义的 .fa 被浏览器选中，因为 .fa 是最新的字体大小定义。

因此，为了克服这个问题，请在 font-awesome.css 之后包含您的 font-awesome-fix.css 或者您可以在包含 font-swesome.css

的行之后使用内联样式

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

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

或使用几种方法中的一种来变得更具体（参见 CSS 特异性 [1]）

Font Awesome CSS overriding my CSS