汉堡图标未在 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>

我错过了什么?

谢谢

裙摆

您只是缺少图标 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-magnify在 MDI 中调用

默认情况下,Vuetify 使用 MDI。如果您想将所有内容切换到 Material Design,文档中有一个指南:

https://vuetifyjs.com/en/customization/icons#install-material-icons

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

汉堡图标不显示

来自分类Dev

图标未在ActionBar中显示

来自分类Dev

带有Bootstrap 2.x中的汉堡包图标的居中徽标

来自分类Dev

菜单中的图标未在android中显示

来自分类Dev

导航抽屉不显示汉堡图标

来自分类Dev

物化设计汉堡图标不显示

来自分类Dev

物化设计汉堡图标不显示

来自分类Dev

某些Fontawesome图标未在Safari中显示

来自分类Dev

网站图标未在Google Chrome中显示

来自分类Dev

图标未在react-native中显示

来自分类Dev

某些Fontawesome图标未在Safari中显示

来自分类Dev

外部SVG图标未在Firefox中显示

来自分类Dev

图像未在Form2中显示

来自分类Dev

图像未在angular2中显示

来自分类Dev

地图标记标题未在Google Map V2上显示全文

来自分类Dev

在2D Java数组中显示char而不是0

来自分类Dev

如何从顺序键盘导航中删除Vuetify附加图标

来自分类Dev

在vuetify中显示嵌套数据

来自分类Dev

如何使Xamarin显示汉堡图标而不是后退按钮?

来自分类Dev

如何在汉堡图标下方显示菜单列表?

来自分类Dev

我的菜单不再显示汉堡包图标

来自分类Dev

物化CSS图标未在Safari浏览器中显示

来自分类Dev

图标未在heroku中显示,但它们在本地

来自分类Dev

jquery-ui图标未在生产环境中显示

来自分类Dev

Android通知未在棉花糖中显示颜色图标

来自分类Dev

Android Studio 2.0未在预览中显示菜单图标

来自分类Dev

Excel图标未在扩展坞中显示打开的工作簿

来自分类Dev

网站图标未在Google Chrome浏览器中显示

来自分类Dev

jQuery Mobile图标未在Android 2.3中显示