Menu icon Foundation
Help adding Font Awesome Pro 5.5 to my Zurb WebApp Template

So I purchased the Font Awesome Pro 5.5 license and started following their "how to use" guide.

Since I did the ZURB WebApp Template installation using a package manager. And really are starting to learn how to use it in my projects, I decided to use Font Awesomes installation also using a package manager.

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

First thing to set up was the Token (since i'm using the pro version) and that was easy.

Then I installed the package using the following command:

npm install --save-dev @fortawesome/fontawesome-pro

and it was added to my package.json and I did also find it my node_modules under the following path:

node_modules/@fortawesome/fontawesome-pro

But from here I'm clueless on how to incorporate it the ZURB WebApp structure.

Found the following post:
https://foundation.zurb.com/forum/posts/46991-howto-foundation-6-font-awesome-and-other-asset-fonts 

But could never get the last step to work (Add FontAwesome to the bottom of your app.scss file)

I tried the following:

@import 'font-awesome';
@import 'fontawesome-pro';
@import '@fortawesome/fontawesome-pro';
@import '@fortawesome';

But all gave me Error in plugin "sass" message: src/assets/scss/app.scss Error: File to import not found or unreadable: fontawesome-pro.

I feel I'm missing some basic knowledge about this and how to actually set it up, so if someone could point me in the right direction I would be super happy.

In the mean while I will continue my quest and If I manage to solve it, I will update this post.

 

font awesome proZURB Templatenpmscss

So I purchased the Font Awesome Pro 5.5 license and started following their "how to use" guide.

Since I did the ZURB WebApp Template installation using a package manager. And really are starting to learn how to use it in my projects, I decided to use Font Awesomes installation also using a package manager.

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

First thing to set up was the Token (since i'm using the pro version) and that was easy.

Then I installed the package using the following command:

npm install --save-dev @fortawesome/fontawesome-pro

and it was added to my package.json and I did also find it my node_modules under the following path:

node_modules/@fortawesome/fontawesome-pro

But from here I'm clueless on how to incorporate it the ZURB WebApp structure.

Found the following post:
https://foundation.zurb.com/forum/posts/46991-howto-foundation-6-font-awesome-and-other-asset-fonts 

But could never get the last step to work (Add FontAwesome to the bottom of your app.scss file)

I tried the following:

@import 'font-awesome';
@import 'fontawesome-pro';
@import '@fortawesome/fontawesome-pro';
@import '@fortawesome';

But all gave me Error in plugin "sass" message: src/assets/scss/app.scss Error: File to import not found or unreadable: fontawesome-pro.

I feel I'm missing some basic knowledge about this and how to actually set it up, so if someone could point me in the right direction I would be super happy.

In the mean while I will continue my quest and If I manage to solve it, I will update this post.

 

This post has been closed. No new replies can be added.

Daniel Nyman 11 months ago

Finally managed to figure out how load stuff from node_modules and how it's all structured (I think).

So I added the following to my src/assets/scss/app.scss:

//import Font Awesome Pro Light
@import 'fontawesome';
@import 'light';

And now my icons are showing up. 

Next step I guess is to figure out how to add the SVG + JS version.