Font Awesome CSS 覆盖我的 CSS答案

【问题标题】：Font Awesome CSS overriding my CSSFont Awesome CSS 覆盖我的 CSS
【发布时间】：2015-04-30 09:57:03
【问题描述】：

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

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

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

目前，我已使用 @import 将 css 包含在工作表 (font-awesome-fix.css) 的顶部，但我无法获得“font: normal normal normal 14px/1 FontAwesome;”完全消失。

请帮忙！

【问题讨论】：

【解决方案1】：

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

When selectors have an equal specificity value, the latest rule is the 一个重要的。

因此，将您的文件包含在最顶层位置并没有帮助，因为 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]）

【讨论】：

【解决方案2】：

让你的选择器更具体：

.side-icon.fa

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

【讨论】：

【解决方案3】：

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

例子：

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

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

例子：

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

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

【讨论】：

【解决方案4】：

嘿，你应该定位之前的元素：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

希望这会有所帮助！

【讨论】：