关于html：fa fa-icons无法与#tag_selector * {_CSS_}一起使用


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

我有一个重写CSS，其样式标签如下，

1
2
3
4
#MainContent * {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
    font-size: small !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        Some Title
   

   
        Social:
       
          <i class="fa fa-linkedin">
          <span class="sr-only">LinkedIn Page</span>
         
       

       
          <i class="fa fa-twitter">
          <span class="sr-only">Twitter Page</span>

但是使用此fa fa-icons不会显示。
我已经完成了这个讨论，该讨论说它不适用于

class *{CSS}

Is there any way to fix it?

相关讨论

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

例如：

1
2
3
4
5
6
7
8
/**
 * 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;
}

尝试重新定义

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

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

说明：

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

如果相同的样式具有相同的重要性，那么接style而来的相同样式也可能会覆盖它。

相关讨论

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

1
2
3
4
5
6
7
#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页面")，这些文本位于类fa的标记内，因此这些单词将与FontAwesome一起显示！

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

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