fa fa 图标无法使用 #tag_selector * {_CSS_}

Question

我有一个覆盖 CSS，样式标签如下，

#MainContent * {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
    font-size: small !important;
}

<div id="MainContent">
    <div id="head">
        <h3>Some Title</h3>
    </div>

    <div id="abc" class="def">
        <strong>Social:</strong>
        <a title="LinkedIn" href="https://www.linkedin.com/">
          <i class="fa fa-linkedin">
          <span class="sr-only">LinkedIn Page</span>
          </i>
        </a>

        <a title="Twitter" href="https://twitter.com/">
          <i class="fa fa-twitter">
          <span class="sr-only">Twitter Page</span>
          </i>
        </a>
    </div>
</div>

但是使用 This fa 图标不会显示。我已经经历了 this 讨论，它说它不适用于

class *{CSS}

Is there any way to fix it?

Answer 1

尝试重新定义

i.fa {
    font-family: FontAwesome!important;
}

这应该在您的 * {} 定义之后。

解释：

您强制为所有元素指定字体 Lucida，但字体 awesome 需要 font-family: FontAwesome。

同样的风格也可以覆盖它，如果它们具有相同的重要性。

Answer 2

您还可以在当前定义中设置排除 CSS 选择器 (:not)。它还会排除 Font Awesome 将 font-size: small 分配给 #MainContent.

中的元素

例如：

/**
 * Set to all elements in #MainContent 
 * @except: .fa (FontAwesome)
 */
 #MainContent *:not(.fa) {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
    font-size: small !important;
}

Answer 3

您可以使用它来覆盖常规设置：

#MainContent * {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  font-size: small !important;
    }
#MainContent * .fa {
  font-family: FontAwesome !important;
}

但是，在您的特定情况下，这也不会真正起作用：您有一些文本（"Twitter Page"、"LinkedIn Page"）在内部的范围内具有 class fa 的标签，因此这些文字将使用 FontAwesome 显示！

因此您必须添加第三条规则，以便再次覆盖这些跨度的 fa 字体设置：

#MainContent * .fa > span {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
  font-size: small !important;
}

fa fa 图标无法使用 #tag_selector * {_CSS_}

fa fa-icons not working with #tag_selector * {_CSS_}

html

css

css-selectors

css-specificity

font-awesome