3

I'm working in Angular 11 with FontAwesome, and there's a context where I'd like to specify an icon by specifying a class attribute on an html element, after the fashion of the vanilla font-awesome usage, instead of by specifying an [icon] attribute. Is there a good way for me to do that in Angular, though?

This doesn't produce any visible icon:

<fa-icon class="fa fa-bars"></fa-icon>

But this does:

<fa-icon [icon]="['fas', 'bars']"></fa-icon>

I'd like to specify this as a class instead of with [icon] because I have an ngRepeat in which I need to vary the icon depending on a property of the repetition's item and set two classes on the element, varying by that same property. Is there some approach that would be best for my needs?

JellicleCat
  • 28,480
  • 24
  • 109
  • 162
  • 1
    Does this answer your question ? https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project – wahab memon Apr 09 '21 at 04:58

2 Answers2

0

You can simply use <span>. Try this: <span class="fa fa-bars"></span>

NeNaD
  • 18,172
  • 8
  • 47
  • 89
0

Also ensure you only run: " npm install font-awesome " instead of the more specific commands listed on:

https://github.com/FortAwesome/angular-fontawesome

You can then just import the CSS directly in the style.css file by adding this line:

@import "~font-awesome/css/font-awesome.css";

Tig7r
  • 525
  • 1
  • 4
  • 21