Vextor-ltd
@Vextor-ltd
Webdeveloper

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

Решил обновить 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;
}


Почему? Что-то ещё где-то нужно прописать?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
Vextor-ltd
@Vextor-ltd Автор вопроса
Webdeveloper
Разобрался. Капец, оказывается в стилях обязательно указывать свойство font-weight
Его ещё и подбирать нужно. Некоторые иконки работают только при значении равном 700.

Короче, сильно всё усложнили.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы