The font is not displayed if I use a reset rule: body * { font-family: sans-serif !important; }

[matih]

In previous version (I don't know which, because the version number is missing in the css) - the font-family rule was applied more specific, on the :before selector :
[class^="icon-"]:before,[class*=" icon-"]:before { font-family: 'FontAwesome';

But now it's applied on the class selector:
class^="icon-"],[class*=" icon-"] { font-family: FontAwesome;
and cause a conflict with global reset rules that override the less specific rules.

[tagliala]

why !important?

https://github.com/necolas/normalize.css/blob/master/normalize.css#L67

[kruszczynski]

Let's think what your !important css code does. It says - overwrite the font to sans-serif everywhere. This is a brute force solution and shouldn't be used.

However sometimes one doesn't want to code beautifully, one wants to get the job done no matter what, not caring about code beauty. Then you might try modifying Font Awesome's css to say font-family: 'FontAwesome' !important;. This should work, however it's quite an ugly code.

[matih]

I agree, I used this rule because I used an external theme and I made custom changes that needed to force and override all theme rules.

But, why not leave the font-family rule on the :before selector like the previous version??

[kruszczynski]

That's an interesting question.

I quickly looked through change logs and Github Milestones but found nothing. I guess there was a reason to get rid of :before.

My guesses would be to do with wide animation support, or some other compatibility issue.

Maybe someone knows :)

Did you try modifying Font Awesome's css?

[matih]

Without an other option I added the old rule to my CSS (not Font Awesome's CSS):
[class^="icon-"]:before,[class*=" icon-"]:before { font-family: 'FontAwesome'; }

[tagliala]

Closing here, please use custom css if you have a similar issue