Issue
In Angular If I use font: inherit style on my component fonts stop working and appear as ▢
app.component.html
<i class="fas fa-car"></i>
app.component.css
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
i {
font: inherit;
}
Stackblitz: Angular Example
I thought I was breaking something within the font awesome library but surprisingly the exact same markup with raw HTML/CSS works fine
<head>
<style>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
i {
font: inherit;
}
</style>
</head>
<body>
<i class="fas fa-car"></i>
</body>Solution
You dont need font: inherit. Font awesome sets the correct font family already.
Why It works in plain HTML/CSS:
In case of your html/css example, it works because of css specificity, your style i { font: inherit; } is overridden by font-awesome css as
class takes precedence over html tags
Why it doesn’t work in Angular
Angular adds scope so that the css you apply for one component doesn’t affect the other. If you inspect your html, you will find attributes like _ngcontent-* and your css being scoped like
i[_ngcontent-*] {
font: inherit;
}
And tag+attribute takes precedence over font-awesome css class and that’s why icon doesn’t appear.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity