Raxit Solanki Raxit Solanki - 29 days ago 8
CSS Question

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

I have an override CSS, in style tag as following,



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





But with This fa fa-icons doesn't show up.
I have gone through this discussion, which says it will not work with


class *{CSS}

Is there any way to fix it?

Answer Source

Try to redefine

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

This should come after your * {} definition.

Explanation:

You force assign font Lucida to all elements, but font awesome needs font-family: FontAwesome.

Also a same style which comes after another one could overwrite it, if they have the same importance.