FA FA-アイコンが#tag_selectorの* {_CSS_}

Question

で作業していない私は

#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>

しかしdoesnのこのFA FA-アイコン」で、以下のようなスタイルのタグで、オーバーライドCSSを持っています表示されます。 私はそれを修正するためにどのような方法があり、それは

クラス* {CSS}

では動作しませんと言うこれ、thisの議論を経てい？

Answer 1

これはあなたの* {}定義の後に来る必要があり

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

を再定義してください。

説明：

あなたはすべての要素にフォントルシーダを割り当てる強制が、フォント素晴らしいニーズfont-family: FontAwesome。

また、同じ重要性を持っている場合は、別のスタイルの後に来る同じスタイルで上書きすることもできます。

Answer 2

現在の定義で除外CSSセレクタ(:not)を設定することもできます。 #MainContentの要素にfont-size: smallを割り当てることから、フォントアウェソームを除外します。

#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; 
} 

しかし、あなたの特定の状況で、これは本当にどちらか動作しません：

/** 
* 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

あなたは一般的な設定を上書きするためにこれを使用することができます：あなたは、いくつかのテキストを持っている（」例えば

「Twitterページ」、「リンク先ページ」）をタグ内にあるfaのタグにすると、これらの単語はFontAwesome！で表示されます。

ですから、それらのスパンのために再度設定faフォントを上書きするために、このような第3の規則を追加する必要があります。

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