1

Recently I installed the npm packages version 0.8 for an Angular 11 project using free brands svg icons, regular svg icons and solid svg icons provided by the installer, it didn't show font based icons option for installing. However, besides of using these icons as module, I would like to have them also in the standard way, such as: <span class="fas fa-chevron-left"></span> to use in telerik components such as:

export const items = {
    parents: [
        {
            text: 'Seguridad',
            icon: 'fa fa-shield',
            expanded: false,
            children: true,
            selected: false
        },

The only css file installed with fortawesome is styles.css under fontawesome-svg-core folder which doesn't contain the icons.

As a workaround I also installed fontawesome in this way:

npm install font-awesome –save

then, I added scss references into styles.scss file, but this duplicate the library.

How can I achieve that with fortawesome?

thanks

Aldemar Cuartas Carvajal
  • 1,573
  • 3
  • 20
  • 39
  • Note that `font-awesome` is v4, you probably want to use `@fortawesome/fontawesome-free` instead. But yeah, `@fortawesome/angular-fontawesome` only supports SVG icons. So if Kendo requires you to use font icons, you'll probably have to have both FA varians with consequences to the bundle size or use @fortawesome/fontawesome-free only... Another approach, which may work (if the library supports it) is to render SVG icon into a string as shown [here](https://stackoverflow.com/a/58078910/1377864) or embed icon into markup in the component template if possible. – Yaroslav Admin Jun 18 '21 at 10:58

1 Answers1

1

I have used the modular method of installing / configuring font awesome, but not tried using the CSS method. I have used the CSS method for bootstrap themes, so one suggestion would be to add the styles to the styles.scss as follows:

@import "/path-to-fontawesome/css/fontawesome.css";

Then ensure your style is in Angular.json:

"styles": [
    "src/styles.scss"
],

If the styles interfere with the font awesome module install, then uninstall the font awesome package and try this method and see if the icons show.

Andrew Halil
  • 1,195
  • 15
  • 15
  • 21