fa fa-icons 不适用于 #tag_selector * {_CSS_}答案

【问题标题】：fa fa-icons not working with #tag_selector * {_CSS_}fa fa-icons 不适用于 #tag_selector * {_CSS_}
【发布时间】：2018-03-03 08:32:27
【问题描述】：

我有一个覆盖 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 fa-icons 不会显示。我已经通过this 的讨论，它说它不适用于

类 *{CSS}

有什么办法可以解决吗？

【问题讨论】：

abc 和 def 你有什么？该代码不应影响它

标签： html css css-selectors font-awesome css-specificity

【解决方案1】：

尝试重新定义

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

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

解释：

您强制将字体 Lucida 分配给所有元素，但字体真棒需要 font-family: FontAwesome。

如果它们具有相同的重要性，那么在另一个样式之后出现的相同样式也可以覆盖它。

【讨论】：

哦，谢谢，我遇到了同样的问题，几乎决定不再使用它，因为我看不到问题。

【解决方案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;
}

【讨论】：

【解决方案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 页面”，“LinkedIn 页面”）在 inside 具有类 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;
}

【讨论】：