css - шрифт иконок, отображающий иконки локально, некоторые иконки не отображаются на опубликованном сайте - PullRequest
Новая
       24

css - шрифт иконок, отображающий иконки локально, некоторые иконки не отображаются на опубликованном сайте

1 голос
/ 17 октября 2019

Хорошо, была похожая тема здесь , но ответ не дает решения.

Я создал шрифт значков с пользовательскими значками через fontastic.me, и он работал хорошо, пока я не добавил еще один значок, не обновил файлы CSS и шрифтов, и теперь я получаю символ «E» там, где я хочумоя новая иконкаДругие пользовательские значки все еще отображаются нормально.

Опубликованный сайт отображает это

Что еще более странно для меня, это то, что когда я "настраиваю" через пользовательский интерфейс (shopify), значок отображается правильно. Правильно отображаемое изображение значка - это заставляет меня думать, что это проблема с разрешениями? Но я не могу понять, как изменить разрешения для файлов шрифтов. Любые идеи?

Ничто, связанное со шрифтами, не отображается как ошибка в консоли.

CSS: 


@font-face {
  font-family: 'ob-ecomm-icons';
  src:  url('ob-ecomm-icons.eot');
  src:  url('ob-ecomm-icons.eot#iefix') format('embedded-opentype'),
    url('ob-ecomm-icons.ttf') format('truetype'),
    url('ob-ecomm-icons.woff') format('woff'),
    url('ob-ecomm-icons.svg#ob-ecomm-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+00-FFFF;
}

.ob-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ob-ecomm-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-icon]:before {
  font-family: "ob-ecomm-icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: bold !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="ob-icon-"]:before,
[class*=" ob-icon-"]:before {
  font-family: "ob-ecomm-icons" !important;
  font-style: normal !important;
  font-weight: bold !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ob-icon-ob-help:before {
  content: "\41";
}
.ob-icon-ob-boot-1:before {
  content: "\45";
}

HTML: 

<!-- Working: -->
<span class="ob-icons ob-icon-ob-help"></span>

<!-- Not working: -->
<span class="ob-icons ob-icon-ob-boot-1"></span>
...