How to properly include Font Awesome 5 Free using Gulp 4 and SCSS?

Question

css

I decided to update fontawesome in the assembly, from version 4 to 5. Everything was simple
in the four . you connect:

@import "../../../node_modules/font-awesome/scss/font-awesome";

and there was nothing more to be done.

In general, I installed it via npm:
npm install --save @fortawesome/fontawesome-free

Created a task in gulpfile.js:

// copy fortawesome icons
function icons_build () {
    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(gulp.dest(path.build.fonts));    // здесь моя папка со шрифтами
}

In the _variables.scss file of my project I wrote:

$fa-font-path:        "../fonts" !default;
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
.fa,.fas,.far,.fal,.fab {
    font-family: "Font Awesome 5 Free";
}

As a result, it only works in html, i.e. then, when I write like this: And if you write unicode in SCSS, then the icons are not displayed:
<i class="fas fa-tools"></i>

&-tools-link::before {
  font-family: 'Font Awesome 5 Free';
  content: "\f7d9";
  color: #fff;
}

Why? Is there anything else that needs to be written somewhere?

Answer 1

Understood. Kapets, it turns out that in styles it is necessary to specify the font-weight
property. It also needs to be selected. Some icons only work when set to 700.
In short, we've made things a lot more complicated.