Font-Awesome icons not loaded due to piece of CSS code

Question

I am trying to integrate font-awesome into a web project but an identified little piece of code in my css makes the font-awesome icons appear as white squares. When I remove the little peace of CSS code it works but I cannot remove it due to the current web site layout. Is there a way to make the icons appear right anyway?

This is the code that blocks the icons that is needed for the layout:

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

It doesn't matter if font-awesome css is included before or after my custom css code. The issue remains...

Answer 1

The problem is in *:before so you have to change that in you css. Take a look at this https://jsfiddle.net/ss95sfLz/

CSS

*,*:after{
  box-sizing: border-box;
  position: relative;
  font-family : Arial;
  font-size   : 12px;
  font-weight : normal;
}

This is problem because font-awesome icon use :before and this is the code

.fa-balance-scale::before {
   content: "";
}

Answer 2

You are overriding all (*) of the fonts in the :before and :after pseudo selectors; which are used by font-awesome and many other libs. You should try to target only what needs to be changed by that code-snippet with a .class or #id .

Answer 3

Your font-family is being overwritten to Arial. Remove the font related parts from this selector and add it to a body selector.

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
}

body {
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}