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

Question

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 1

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.