Is it possible to set fontawesome icon to an element from css when using angular-fontawesome?

Question

When using fontawesome with the link to the css from cdn it is possible to use css to put icons e.g. inside buttons like this:

.info-button:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f05a";
  font-weight: 900;
}

This above code puts a small info icon inside the button.

I'm trying to find out if there is a similar way to do this when using the angular-fontawesome component (https://github.com/FortAwesome/angular-fontawesome). I have installed it and tried (icon library approach), but it does not work. Also, the node_modules folder doesn't seem to have any style sheets to link to.

I need to use the angular-fontawesome (another component requires it), and it seems redundant to use both angular-fontawesome and also the link to css. (<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" media="print" onload="this.media='all'; this.onload=null;">)

Any ideas or experience on how to solve this?

Answer 1

No, it is not possible to do that.

There are two flavors of the FontAwesome "Webfonts + CSS" and "SVG + JS". You can read more about the pros and cons of each approach in the official documentation.

The angular-fontawesome library is built using the latter approach - "SVG + JS" and therefore there is no icon font or CSS that you can use to display an icon character using CSS only.

So either you can:

• change your code to use the fa-icon component instead of a CSS rule
• use fontawesome-svg-core to render the icon as an SVG string and append it dynamically using JS - see guide