How to reference the produced .css file by Angular CLI ?

[mehmetgunacti]

I've dowloaded the latest Fontawesome.zip and included the scss files in my project.

Folder structure is as follows :

-src
      -assets
            -fonts
                  -fontawesome
                        - *.eot, *.ttf, *.svg, etc. (= content of webfont folder in zip)
      -index.html

In the produces styles.bundle.js file all the icons are included. But when I try to use them inside a component's template (eg. ) I only get a rectangle.

What's the proper way of referencing the webfont folder ?

Note: on the Fontawesome page it says :

You probably already know this but we seem to always forget it. The font path is relative from your compiled CSS directory. Ensure that you place your webfonts directory in a place relative to where your final CSS will be located.

In _variables.scss I've tried :

$fa-font-path:                "/assets/fonts/fontawesome" !default;

$fa-font-path:                "assets/fonts/fontawesome" !default;

$fa-font-path:                "http://localhost:4200/assets/fonts/fontawesome" !default;

but with no success.

Any help is appreciated.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

This is quite hard to replicate. Please check your browser console to see if the font files are loaded properly (you should see errros) and use the navigation bar to check that they are available in the expected directory (eg: http://localhost:4200/assets/fonts/fontawesome/fa-solid-900.woff)

[mehmetgunacti]

Just tried it again, but I still see only rectangles. The browser (tested on latest Chrome and latest FF) doesn't log anything to the console, even in verbose mode Fontawesome is never mentioned.

I can see the icons when using CDN. Also, I can download the files after typing their url in address bar, eg. http://localhost:4200/assets/fonts/fontawesome/fa-solid-900.woff.

Problem is, Angular doesn't produce a css file, only javascript files. My best guess it "assets/fonts/fontawesome" should actually work, because when I inspect the produced folder, there's an "assets" folder next to the .js files.

You can reproduce the error by installing nodejs. then "ng new testapp --style scss", then importing webfont folder and scss files of FA. Finally using the font (i class="fas ...") and invoking "ng serve".

I already gave up and switched to CDN. But if you want me to test something, just let me know. Thanks for the quick response.

[cvocvo]

@msegmx Did you ever find a solution to this?

[mehmetgunacti]

Hi, after switching to CDN I never went back, so no, I stopped working on this problem.