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 :)
Top comments (10)
I did the exact same but getting blank squares for font awesome icons.
@sabbirsobhani Could you share your code, so I can check?
Yes, here in my repo github.com/iamsabbirsobhani/fontaw...
@sabbirsobhani
I have checked your code, and it's my fault I forgot to change paths for
webFontsPath
anddistWebfonts
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.
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.
I checked the code, and you have to put the
index.html
andwebfonts
folder in the same folder (dist
)You can define a task to make a copy of the
index.html
in thedist
folder. Then check CSS and JS file paths again.It works!
That's awesome, you did a good job.
Thanks for your feedback, which helped me improve the article.
Happy coding :)
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;
}
}
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.