0

I have an Angular app that is packaged using Angular Elements and then loaded into another web application. I am using Font Awesome but icons are being displayed as boxes.

Similar to what is described in How to know if a font (@font-face) has already been loaded?

I have added fontawesome through npm.

Also I added the following to my angular.json

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css"
]

This is how I am using FA.

<button class="btn btn-primary btn-sm fa fa-bars">
  {{ label }}
</button>

So my question is what am I missing here? Any help is much appreciated.

Samer Makary
  • 3
  • 2

1 Answers1

0

instead of manually configure font-awesome in the angular project please use NPM package, which will auto-configure everything for you in few simple steps

Please refer this like/npm document https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Pankaj Rupapara
  • 752
  • 4
  • 9