Правильно добавить font-awesome в проект gulp

Как я могу добавить и использовать font awesome в моем новом проекте gulp-scss-bootstrap? Как это сделать чисто и правильно? Спасибо.

Почему вы не используете CDN?

— 09.03.2018 14:50

fontawesome.com/how-to-use/use-with-node-js

— 09.03.2018 14:52

sass gulp bootstrap-4 font-awesome

09.03.2018 14:42

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

8 665

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Установите font awesome с помощью NPM. Вы можете добавить его в свой package.json:

  "devDependencies": {
    "bootstrap": "latest",
    "font-awesome": "latest",
etc

Затем добавьте задачу gulp для копирования файлов из node_modules в каталог в вашем развертывании:

gulp.task('copy', function() {
    gulp.src([
            'node_modules/font-awesome/**',
            '!node_modules/font-awesome/**/*.map',
            '!node_modules/font-awesome/.npmignore',
            '!node_modules/font-awesome/*.txt',
            '!node_modules/font-awesome/*.md',
            '!node_modules/font-awesome/*.json'
        ])
        .pipe(gulp.dest('vendor/font-awesome'))
etc

Запустите gulp copy, и он должен настроить каталог за вас. Затем вы можете импортировать шрифт в свой index.html

<link href = "vendor/font-awesome/css/font-awesome.min.css" rel = "stylesheet" type = "text/css">

Вы предлагаете устаревшую версию FontAwesome.

— 09.03.2018 14:54

Я видел версию с @import font awesome в основном scss. Это хорошая практика?

— 09.03.2018 15:16

Я думаю, что link в файле HTML обычно предпочтительнее import в файле CSS, поскольку браузер будет загружать связанные файлы параллельно для более быстрой загрузки страницы. См. Ответ это.

— 09.03.2018 15:26

09.03.2018 14:49

Ответ принят как подходящий

1 скачать fontawesome 5

npm install --save-dev @fortawesome/fontawesome-free

2 в файле SCSS

@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";

3 в gulpfile.js добавить задачу

gulp.task('icons', function() {
    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(gulp.dest(dist+'/assets/webfonts/'));
});

Их документы, в которых есть несколько дополнительных деталей: fontawesome.com/how-to-use/on-the-web/using-with/sass и fontawesome.com/how-to-use/on-the-web/setup/…. Вы можете, например, настроить $fa-font-path, чтобы при необходимости изменить расположение папки веб-шрифтов и использовать их миксины.

— 18.08.2019 02:43

Кроме того, требуется первый импорт fontawesome. Последующие операции импорта предназначены для определенных стилей; команда fontawesome время от времени добавляет новые стили. Я не уверен, насколько «необходимы» прокладки

— 18.08.2019 02:44

24.07.2018 08:33

На самом деле это:

npm install --save-dev @fortawesome/fontawesome-free

форт не купель.

Лучше ссылаться напрямую, так как команда может измениться

Ссылка также может измениться, но вы всегда можете поискать ее на fontawesome.com.

Лучше не «просто» ссылаться, поскольку веб-страницы перемещаются. Ничего страшного, если ваша команда зависит от версии. Всегда лучше указать контекст для ссылки, процитировать соответствующие команды и указать дополнительную информацию. stackoverflow.com/help/how-to-answer

— 17.04.2019 16:54

09.03.2019 13:32