Почему значок vuetify не отображается? - PullRequest
Новая
       33

Почему значок vuetify не отображается?

0 голосов
/ 03 октября 2019

Я использую vuetify последнюю версию. Я следую этому уроку https://vuetifyjs.com/en/getting-started/quick-start

В компоненте vue я пытаюсь так: 

  <v-text-field
    append-icon="mic"
    class="mx-4"
    flat
    hide-details
    label="Search"
    prepend-inner-icon="search"
    solo-inverted
  ></v-text-field>

Результат выглядит так:

image

В моем public / index.html вот так: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>msm-website-appointment</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but msm-website-appointment doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

похоже, что материал дизайна был загружен. но почему значок не появляется?

1 Ответ

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

Вы, вероятно, ссылаетесь на mdi (шрифт Material Design Icons) ? в соответствии с документацией , в то время как ваш v-text-field использует другой ( по умолчаниюmd в версии ^1.5), поэтому отсутствуют значки.

Чтобы устранить эту проблему, вы должны добавить необходимый значок шрифта , или, если хотите,выберите mdi, выполните следующие настройки (обратите внимание, что для части привязки свойства icons стоит префикс mdi-): 

<v-text-field
  append-icon="mdi-microphone"
  class="mx-4"
  flat
  hide-details
  label="Search"
  prepend-inner-icon="mdi-magnify"
  solo-inverted>
</v-text-field>

В качестве примечания, поскольку вы инициализировали приложение с помощью Vue CLI,Вам больше не нужно импортировать значки из CDN, так как они будут учтены процессом сборки, поэтому не стесняйтесь удалять их из файла public/index.html.

...