1

I was trying to use font awesome css in my project but the css doesn't get applied to HTML elements. If i remove Angular Material theme then only the Font Awesome CSS is working. But then Angular Material Components will not work!!!

@import "~font-awesome/css/font-awesome.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Any guidance for this - enter image description here

Arpan Sharma
  • 395
  • 1
  • 10
  • 20

2 Answers2

1

In angular.json, we have styles property which will allow to load third party css files.

"styles": [
     "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "font-awesome/css/font-awesome.css"
],
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • yes it's the same as you put these in styles.css - the thing might be both material css and font-awesome aren't working together!!! – Arpan Sharma Aug 04 '18 at 18:01
0

One of the easiest ways is to import the CSS at the global level in the index.html in src folder. You can do this with a simple <link rel=“stylesheet” href=“/fontawesome.css

That should hopefully fix issue

adamxweb
  • 121
  • 8
  • Can you give an example of the html element with the FontAwesome class in it? Possibly making a little Stackblitz may be helpful to understand – adamxweb Aug 05 '18 at 06:14