【问题标题】: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;”完全消失。

请帮忙!

【问题讨论】:

    标签: html css fonts font-awesome


    【解决方案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])

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

    【讨论】:

      【解决方案2】:

      让你的选择器更具体:

      .side-icon.fa
      

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

      【讨论】:

      • 这修复了它!我已经盯着我的样式表看了一个小时,把我的头发扯掉了。谢谢!
      • @asoxus 太棒了!我添加了一个文档来了解为什么会这样。
      【解决方案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;
          }
          

          希望这会有所帮助!

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2017-05-24
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多