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

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

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