0

My FontAwesome icons won't work because the $fa-font-path variable is not taken into account while building my fontawesome.scss file.

Step 1: I installed FontAwesome 5.13 via npm

npm install @fortawesome/fontawesome-free --save

Step 2: I edited my /scss/vendors.scss file and added the following

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";

These seems to be the right paths, as if I make any changes I'm getting an error during the build.

Step 3: I re-built my vendor.css

./node_modules/.bin/parcel build scss/vendor.scss --no-source-maps --out-dir public/css --out-file bundle.css

Inside it seems that / is used instead of $fa-font-path value.

vendor.css

Step 4: I tried to set $fa-font-path value in node_modules/@fortawesome/fontawesome-free/scss/_variables.scss

Same issue.

Bruno Leveque
  • 2,647
  • 2
  • 23
  • 33

1 Answers1

0

I was eventually able to resolve this issue.

It was due to parcel, which by default sets / instead of ./ as the default public path for CSS files. There's quite a lot of people complaining about this behavior as well as issues referenced in their Github repo.

SOLUTION

Add the following parameter to your build script:

--public-url ./

Example:

parcel build src/index.html -d public --public-url ./

More details in Parcel's Documentation.

Bruno Leveque
  • 2,647
  • 2
  • 23
  • 33