Font Awesome 5 with Using a Package Manager + using Gulp 4

In this article, we will learn how to add Font Awesome 5 by using the package manager and gulp 4.

1- Install Font Awesome using a Package Manager

npm install --save @fortawesome/fontawesome-free

or

yarn add --dev @fortawesome/fontawesome-free

2- Import Font Awesome in you main SCSS file

// in your main SCSS file
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';

// import one or more styles
@import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';

Important Tip: to avoid getting blank squares for font awesome icons you need adding those filesotf | ttf | eot | svg | woff(2) and they are in webfonts folder
you need to make sure webfonts folder and index.html are in your dist folder of production version

3- Check if webfonts folder exists then make a copy in dist by using any file in the webfonts folder.

Note: We need to pass a path for a file, not a folder because in docs of package was mentioned that:

The package used to check if filepath exists and is a file. Returns false for directories.

We will use file-exists package to check if webfonts exists then make a copy of webfonts and put in the dist folder

// in your gulpfile
const fileExists = require('file-exists');
const gulpif = require('gulp-if');

const webFontsPath= './node_modules/@fortawesome/fontawesome-free/webfonts/*';
const distWebfonts= 'dist/webfonts';

// use a file of webfonts to check it's existing then make a copy in dist
const fontawesomeWebfont =
  './node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot';

// to check if file exists or not for testing purposes
console.log(fileExists.sync(fontawesomeWebfont)); // OUTPUTS: true or false

// copy webfonts folder if it exists
// because our task contains asynchronous code
// use async before our task
// to avoid getting this error `Did you forget to signal async completion`
async function copyfontawesomeWebfontsTask() {
  return gulpif(
    fileExists.sync(fontawesomeWebfont),
    src([webFontsPath]).pipe(dest(distWebfonts))
  );
}

Wow, now you can use copyfontawesomeWebfontsTask :)

Thanks for reading! I know there are many methods to do that but this method worked for me and like to share with you.
Hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

Comments

[Sabbir Sobhani]

I did the exact same but getting blank squares for font awesome icons.

[Sarah Hassan]

@sabbirsobhani Could you share your code, so I can check?

[Sabbir Sobhani]

Yes, here in my repo github.com/iamsabbirsobhani/fontaw...

[Sarah Hassan]

@sabbirsobhani

I have checked your code, and it's my fault I forgot to change paths for webFontsPath and distWebfonts
it should be src([webFontsPath]).pipe(dest(distWebfonts)).
Try to change line 35 in gulpfile
I have edited the post, I'm sorry for this typo.
Let me know if this solved the problem.

[Sabbir Sobhani]

I did exactly as you instructed but, still getting blank squares. And, I updated the code on my GitHub repo so that you can check.

[Sarah Hassan]

I checked the code, and you have to put the index.html and webfonts folder in the same folder (dist)

You can define a task to make a copy of the index.html in the dist folder. Then check CSS and JS file paths again.

[Sabbir Sobhani]

It works!

[Sarah Hassan]

That's awesome, you did a good job.
Thanks for your feedback, which helped me improve the article.
Happy coding :)

[vladikslavus]

I had done the same before I found your post here, but there's a problem.

The fact is it works only as html code. I mean when I do it this way:

But when I'm trying to put unicode in SCSS, the icons don't come out though:
top-menu {
display: flex;
&-tools-link::before {
font-family: 'Font Awesome 5 Free';
content: "\f7d9";
color: #fff;
}
}

[vladikslavus]

I've figured it out! It turned out that it's necessary to specify the font-weight property in the styles. The font-weight property also needs to be adjusted. Some icons only work with a value of 700, some with 400.

In short, things have become too complicated compared to the previous version.