Как правльно подключить Font Awesome 5 Free, используя Gulp 4 и SCSS?

Question

[Влад]

Решил обновить fontawesome в сборке, с версии 4 на 5.
В четвёрке всё было просто. подключаешь:

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

и больше делать ничего не нужно было.

В общем, через npm заинсталил:
npm install --save @fortawesome/fontawesome-free

Создал таск в gulpfile.js:

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

В файле _variables.scss своего проекта прописал:

$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";
}

В итоге, работает только в html, т.е. тогда, когда я прописываю так:
<i class="fas fa-tools"></i>

А если прописать unicode в SCSS, то иконки не выводятся:

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

Почему? Что-то ещё где-то нужно прописать?

Answer 1

[Влад]

Разобрался. Капец, оказывается в стилях обязательно указывать свойство font-weight
Его ещё и подбирать нужно. Некоторые иконки работают только при значении равном 700.

Короче, сильно всё усложнили.