Vuetify 2.0 中未显示汉堡包图标
Posted
技术标签:
【中文标题】Vuetify 2.0 中未显示汉堡包图标【英文标题】：Hamburger icon not showing in Vuetify 2.0 【发布时间】：2019-12-03 05:46:17 【问题描述】：我正在升级到新的 vuetify 2.0，我注意到应用栏上没有显示汉堡图标。
在他们使用相同代码的示例中，它确实显示了。
https://vuetifyjs.com/en/components/app-bars
https://codepen.io/anon/pen/rXLyzE?&editable=true&editors=101
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar absolute dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-app-bar>
</v-app>
</div>
<script>
new Vue(
el: '#app',
vuetify: new Vuetify(),
data: () => (
)
);
</script>
</body>
</html>
我错过了什么？
谢谢
【问题讨论】：
codepen 链接失效。 【参考方案1】：您只是缺少图标 CSS：
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet">
见https://vuetifyjs.com/en/getting-started/quick-start#cdn-usage
更新：
来自原始问题：
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
这将从 Material Design 中提取图标，请参阅：
https://material.io/tools/icons/?style=baseline
尽管命名相似，但这是与 Material Design Icons (MDI) 不同的图标集：
https://materialdesignicons.com/
search 图标来自 Material Design，在 MDI 中将被称为mdi-magnify。
默认情况下，Vuetify 使用 MDI。如果您想将所有内容切换到 Material Design，文档中有一个指南：
https://vuetifyjs.com/en/customization/icons#install-material-icons
【讨论】：
为什么我需要那个和另一个说 Material+Icons 的？ @omega 我已经更新了我的答案。您不需要两者，只需我提到的那个。 我试着只拥有它们中的每一个，但似乎我需要两者。带有 Material+Icons 的那个会加载搜索图标的图标，而带有 materialdesignicons 的那个会加载汉堡的一个..... @omega 我之前的更新不准确，我已经再次更新了。【参考方案2】：当前版本
我使用的是 Vue CLI 3，但遇到了同样的问题。
vuetify v2.0.0 @mdi/font v4.4.95解决方案
首先，请将@mdi/font 库添加到您的 package.son 中
$ yarn add @mdi/font
其次，像这样将 materialdesignicons.scss 导入您的 SCSS。
// application.scss
$mdi-font-path: "~@mdi/font/fonts" !default;
@import '~@mdi/font/scss/materialdesignicons';
编译后
【讨论】：
以上是关于Vuetify 2.0 中未显示汉堡包图标的主要内容，如果未能解决你的问题，请参考以下文章