0

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
pptaszni
  • 5,591
  • 5
  • 27
  • 43
Nabil Dendane
  • 73
  • 7
  • donsnt work... – Nabil Dendane Jan 10 '20 at 15:19
  • You shouldn't use Yarn for this type of use case. See https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself for more details of what to do instead. – Jason Smith Jan 10 '20 at 15:59
  • thanks for this post, I have already seen this links but when i reference ~/lib/@fortawesome/fontawesome-free/js/all.js donsn't work... i think it the @ problematic but im not sure. Yarn get latest version tu update! – Nabil Dendane Jan 10 '20 at 16:22
  • If you want to refer to FontAwesome via a script tag in HTML, you ***can't*** use Yarn. You must use a CDN or the pre-compiled CSS file available from the link in my previous comment. If you use Yarn to install FontAwesome, you must also use WebPack or another bundler to convert it to a usable format for your project. – Jason Smith Jan 10 '20 at 18:00

1 Answers1

2

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.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444