Решил обновить 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;
}
Почему? Что-то ещё где-то нужно прописать?
