为什么vuetify图标不显示?

hwazgwia  于 2022-12-14  发布在  Vue.js
关注(0)|答案(3)|浏览(610)

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

它看起来像设计材料已经加载.但为什么不出现图标?

h5qlskok

h5qlskok1#

根据文档,您可能正在引用mdi(材质设计图标字体)👈,而您的v-text-field正在使用不同的字体(defaults to md in version ^1.5),因此缺少图标。
要解决此问题,您需要添加所需的图标字体,或者如果您选择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>

作为一个侧记,由于您已经使用Vue CLI初始化了应用程序,您不再需要从CDN导入图标,因为它们将由构建过程处理,所以您可以随时从您的public/index.html文件中删除它。

von4xj4u

von4xj4u2#

如果构建中缺少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
            }
        }
    }
}
d7v8vwbk

d7v8vwbk3#

若要修正您的问题,您应该将mdi汇入为预设图标集。否则,vuetify将不知道从何处载入此图标。若要这麽做,请依照下列步骤进行:本文中有更详细的描述:https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/
1.安装
npm安装@mdi/font
1.汇入
导入 * '@mdi/font/css/材料设计图标.css'
1.新增
`

const vuetify = createVuetify({ // Replaces new Vuetify(...) in vue3
    theme: {
        defaultTheme: 'dark'
    },
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi
        }
    }

`

相关问题