Question

我正在使用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>

看起来设计材料已经加载。但是为什么不显示图标？

Answer 1

您可能引用了mdi（“材料设计图标”字体）?according to the documentation，而您的v-text-field使用的是其他字体（defaults to md in version ^1.5），因此缺少了图标。

要解决此问题，您需要添加required icon font，或者如果您选择mdi，请进行以下调整（请注意，图标属性绑定部分的前缀为{{1 }}）：

mdi-

请注意，由于您已使用Vue CLI初始化了该应用程序，因此您不再需要从CDN导入图标，因为它们将在构建过程中处理，因此请随时从您的图标中删除它们<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>文件。

Answer 2

您也可以直接在组件中加载它，以防构建中缺少 mdi 包。

  <v-text-field
    :append-icon="icons.mdiMicrophone"
    class="mx-4"
    flat
    hide-details
    label="Search"
    :prepend-inner-icon="icons.mdiMagnify"
    solo-inverted
  />

<script>
import { mdiMicrophone, mdiMagnify } from '@mdi/js'

export default {
    data() {
        return {
            icons: {
                mdiMicrophone
            }
        }
    }
}

为什么vuetify图标没有显示？

2 个答案: