fa fa-icônes ne fonctionne pas aveC#tag_selector * {_CSS_}

Question

J'ai un CSS prioritaire, dans la balise de style comme suit,

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

Mais avec cette fa fa-icônes n » t montrer. Je suis passé par this discussion, qui dit qu'il ne fonctionne pas avec

classe * {CSS}

Est-il possible de le réparer?

Answer 1

Essayez de redéfinissent

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

Cela devrait venir après votre * {} définition.

Explication:

Vous obligez assigner la police Lucida à tous les éléments, mais la police des besoins impressionnants font-family: FontAwesome.

De même un style qui vient après un autre pourrait l'écraser, s'ils ont la même importance.

Answer 2

Vous pouvez également définir un sélecteur CSS exclu (:not) dans votre définition actuelle. Il va également exclure Font Awesome d'affecter font-size: small à vos éléments dans #MainContent.

Par exemple:

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

Vous pouvez l'utiliser pour remplacer le paramètre général:

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

Cependant, dans votre situation particulière ce ne sera pas vraiment travailler soit: Vous avez un texte (» Twitter Page "," LinkedIn Page ") dans les intervalles qui sont à l'intérieur les tags qui ont la classe fa, donc ces mots seront affichés avec FontAwesome!

Vous devez ajouter une troisième règle comme celui-ci pour remplacer la police fa nouveau réglage pour les travées:

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