font awesome icons not loading on netlify when using npm

Viewed 178

I am deploying my personal website on netlify and I'm using the following link tag for the icons

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

I tried setting up environment variables for node.js on Netlify and forcing npm install --save @fortawesome/fontawesome-free but it didn't solve my problem.

I read in this post that Netlify runs npm install and then deletes the node_modules folder so the above link tag doesn't work and my page doesn't show the icons.

One of the answers in that post said that it's wrong to have the node_modules folder on the deployed folder, and that I have to take my resources during build time. The problem is, I don't know how to do that.

So, I wanted to know if there's a simple workaround besides the one on the post mentioned above to keep the node_modules folder in the netlify deployed folder or a little guidance to get my icons in build time so I don't need the whole node_modules folder.

Every help is appreciated!


Extra information:

This is the site (with an old deploy that shows the icons)
This is how my package.json file look:

{
  "name": "david-choi",
  "version": "1.0.0",
  "description": "David's Choi personal website",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm install --save @fortawesome/fontawesome-free"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/choidavid4/david-choi.git"
  },
  "author": "David Choi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/choidavid4/david-choi/issues"
  },
  "homepage": "https://github.com/choidavid4/david-choi.git",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4"
  }
}
0 Answers
Related