Question

我正在升级到新的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>

我想念什么？

谢谢

Answer 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

Answer 2

当前版本

我正在使用Vue CLI 3，但遇到了同样的问题。

vuetify v2.0.0
@ mdi / font v4.4.95

解决方案

首先，请在包中添加@ mdi / font库。

$ yarn add @mdi/font

第二步，像这样将materialdesignicons.scss导入到您的SCSS中。

// application.scss
$mdi-font-path: "~@mdi/font/fonts" !default;
@import '~@mdi/font/scss/materialdesignicons';

编译后

Vuetify 2.0中未显示汉堡包图标

2 个答案: