我使用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>
它看起来像设计材料已经加载.但为什么不出现图标?
3条答案
按热度按时间h5qlskok1#
根据文档,您可能正在引用
mdi
(材质设计图标字体)👈,而您的v-text-field
正在使用不同的字体(defaults tomd
in version^1.5
),因此缺少图标。要解决此问题,您需要添加所需的图标字体,或者如果您选择
mdi
,请执行以下调整(请注意,图标属性绑定部分的前缀为mdi-
):作为一个侧记,由于您已经使用Vue CLI初始化了应用程序,您不再需要从CDN导入图标,因为它们将由构建过程处理,所以您可以随时从您的
public/index.html
文件中删除它。von4xj4u2#
如果构建中缺少
mdi
包,也可以直接在组件中加载它。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.新增
`
`