как импортировать и использовать Fontello в проекте vue / nuxt - PullRequest
Новая
       70

как импортировать и использовать Fontello в проекте vue / nuxt

0 голосов
/ 19 февраля 2020

так что у меня есть изображение SVG, которое я хочу преобразовать в иконку, используя Fontello, чтобы конвертировать и импортировать его в мой проект nuxt. но конфигурация, кажется, не работает

, это то, что в моем nuxt.config. js файл 

head: {
  css: [
    '~/assets/css/main.css',
    '~/assets/css/animation.css',
    '~/assets/css/fontello.css',
    '~/assets/css/fontello-ie7.css',
    '~/assets/css/fontello-ie7-codes.css', /*if IE 7 */
  ],
}

на моей html странице, я использую 

<i @click="goToChat" class="the-icons demo-icon icon-chat menu ic-menu">&#xe800;</i>

и мой файл css, 

.demo-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

проблема в том, что файл css не прочитан font-family: "fontello"; я настроил его неправильно?

1 Ответ

0 голосов
/ 10 марта 2020

Наткнулся на ту же проблему только сегодня вечером и искал, как это сделать, Я попробовал вашу конфигурацию, и она работает .. Вы также импортировали папку шрифтов, предоставленную fontello, которая содержит реальный шрифт?

Если вы откроете файл fontello. css, вы увидите свойство @ font-face со ссылкой на файлы шрифтов, поэтому убедитесь, что URL-адрес правильный (самый простой способ - импортировать шрифт и папку css из fontello.zip), чтобы ваши активы выглядели как-то так: Активы - css - шрифт - изображения

...