HTML/CSS - Font Icons : Class from fontawesome not working when calling it from css file

I'm pretty "new" to HTML/CSS coding so apologies if this topic is trivial.

This concern the use of font icons, more precisely Fontawesome.

HTML FILE : In my html document, the icon is embeded that way (within a "menu" class) : <i class="fas fa-user"></i>
CSS FILE : So, in order to apply styles to this icon : .menu .fas {width: 2rem;}

But it doesnt work for some reason.

When I inspect the code in my browser, the line from html appear to be not used (grayed out), and instead I have new lines starting with : <svg class="svg-inline--fa fa-user" ...

So when I change my css code to : .menu .svg-inline--fa{width: 2rem;} It works.

I would love to have some explanations, thanks ! :)

Solution

Go in your Font awesome project and then go to settings. There you can select the technology to use for your font : Web Font (CSS pseudo element) or SVGs.

SVG is using JS to replace element with SVGs.