为什么 vuetify 图标不显示？

Question

为什么 vuetify 图标不显示？

hap*_*ver 2 vue.js material-design vue-component vuetify.js vue-cli

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

Run Code Online (Sandbox Code Playgroud)

结果是这样的：

图片

在我的 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>

Run Code Online (Sandbox Code Playgroud)

看起来设计材料已加载。但为什么没有出现图标？

Answer 1

Yom*_* S. 7

您可能根据文档引用mdi（Material Design Icons 字体），而您使用的是不同的（默认为 in 版本），因此缺少图标。v-text-fieldmd^1.5

要解决此问题，您需要添加所需的图标 font，或者如果您选择mdi，请执行以下调整（注意以为前缀的图标属性绑定部分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>

Run Code Online (Sandbox Code Playgroud)

附带说明一下，由于您已经使用 Vue CLI 初始化了应用程序，因此您不再需要从 CDN 导入图标，因为它们将由构建过程处理，因此请随时将其从您的public/index.html文件中删除。

归档时间：	6 年前
查看次数：	5560 次
最近记录：	4 年，2 月前