Raxit Solanki Raxit Solanki - 29 days ago 5
HTML 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 id="abc" class="def">
<a title="LinkedIn" href="https://www.linkedin.com/">
<i class="fa fa-linkedin">
<span class="sr-only">LinkedIn Page</span>

<a title="Twitter" href="https://twitter.com/">
<i class="fa fa-twitter">
<span class="sr-only">Twitter Page</span>

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.


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.