DEV Community

Cover image for Font Awesome 5 with Using a Package Manager + using Gulp 4
Sarah Hassan
Sarah Hassan

Posted on • Updated on

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';

Enter fullscreen mode Exit fullscreen mode

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

Alt text of image

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))
  );
}
Enter fullscreen mode Exit fullscreen mode

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 :)

Discussion (10)

Collapse
sabbirsobhani profile image
Sabbir Sobhani

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

Collapse
sarah27h profile image
Sarah Hassan Author • Edited

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

Collapse
sabbirsobhani profile image
Sabbir Sobhani • Edited
Thread Thread
sarah27h profile image
Sarah Hassan Author

@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.

Thread Thread
sabbirsobhani profile image
Sabbir Sobhani • Edited

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.

Thread Thread
sarah27h profile image
Sarah Hassan Author • Edited

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.

Alt text of image

Thread Thread
sabbirsobhani profile image
Sabbir Sobhani

It works!

Thread Thread
sarah27h profile image
Sarah Hassan Author • Edited

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

Collapse
vladikslavus profile image
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;
}
}

Collapse
vladikslavus profile image
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.