Question

我正在撰写一个页面 - 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;'完全消失。

请帮忙！

Answer 1

使您的选择器更具体：

.side-icon.fa

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

Answer 2

嘿，你应该将之前的元素作为目标：

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

Answer 3

也许可以尝试在您需要更改字体的特定.side-icon上添加ID CSS：

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

希望这有帮助！

Answer 4

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

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

Answer 5

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

示例：

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

如果仍然无效，您可能需要使用！important override来添加另一层特异性。我不会建议立即跳转使用它，但这主要是因为我更喜欢编码而不是使用！甚至无处不在。

示例：

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

如果这些都不起作用，可能会有其他问题弄乱你的风格。

Answer 6

这是因为CSS特异性规则开始了：

当选择器具有相同的特异性值时，最新的规则是重要的一个。

因此，将文件包含在最顶层的位置无济于事，因为font-awesome.css稍后会包含在内，因为.side-icon和.fa都是同一元素上的类，.fa font-awesome.css定义的.fa被浏览器选中，因为font-awesome-fix.css是最新的字体大小定义。

因此，为了解决此问题，请在font-awesome.css之后添加<style> .side-icon { font-size: 28px; } </style>，或者在包含font-swesome.css的行之后使用内联样式

{{1}}

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

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

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

Font Awesome CSS覆盖了我的CSS

6 个答案: