Search code examples
asp.net-coreyarnpkgwwwroot

How to use Font Awesome after it being installed with Yarn


I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:

yarn add @fortawesome/fontawesome-free

However, whenI try to reference it in my HEAD section like this:

<script defer src="~/lib/@fortawesome/fontawesome-free/js/all.js"></script>

I get the following error:

the 'fortawesome' doesnt exist in actual context

Solution

  • Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The @fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.

    I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.

    For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.