Почему в продакшене не работает fontawesome?

Question

[Art Snail]

Добавляю bootstrap & font awesome в проект чере yarn. Локально всё работает. Но в продакшене иконки не выводятся не bootstrap, не font awesome. Bootstrap работает нормально.

Answer 1

[Apostol63]

font как подключаешь? может пути неверными стали.
Попробуй font подключи онлайн и проверь

Comments

[Art Snail]

Спасибо за ответ. Онлайн подключал, при первичной загрузке страницы иконки появляются, но при переходе на другую страницу пропадают. Причём как локально так и в продакшене.

[Apostol63]

поставь для i в css font-family: "Font Awesome" (загугли правильный синтаксис свойства) и убери всякие font-weight и прочее у i
У меня иногда от этого не работает

[Art Snail]

К сожалению не помогло.

Answer 2

[Василий Шахунов]

Не понимает он путей ассетов. В качестве решения можно взять оригинальный fontawesome.sccs из пакета yarn/npm и заменить на свой _fontawesome.sccs с исправленными путями до шрифтов.

$fa-font-path: "font-awesome/fonts" !default;

@import "font-awesome/scss/variables";
@import "font-awesome/scss/mixins";

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
  font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@import "font-awesome/scss/core";
@import "font-awesome/scss/larger";
@import "font-awesome/scss/fixed-width";
@import "font-awesome/scss/list";
@import "font-awesome/scss/bordered-pulled";
@import "font-awesome/scss/animated";
@import "font-awesome/scss/rotated-flipped";
@import "font-awesome/scss/stacked";
@import "font-awesome/scss/icons";
@import "font-awesome/scss/screen-reader";