猿问

汉堡图标未在 Vuetify 2.0 中显示

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

我错过了什么?


翻阅古今
浏览 217回答 2
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';编译后
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答