如何解决vuetify中图标不显示的问题或默认颜色显示不成功

最新推荐文章于 2023-11-12 23:13:04 发布
最新推荐文章于 2023-11-12 23:13:04 发布
阅读量3.3k 收藏 4
点赞数 8
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43966566/article/details/105575343
版权

1.在对应项目里安装依赖

npm install @mdi/font -D

在这里插入图片描述
2.在main.js中引入

import '@mdi/font/css/materialdesignicons.css'

在这里插入图片描述
3.保存之后页面会重新渲染，查看浏览器中显示结果
在这里插入图片描述
4.若图标显示成功但图标默认的颜色没有显示出来，若用的是vue2.X的版本，可以按如下修改，只需要将App.vue中的最外层的div改成v-app即可，修改如下
在这里插入图片描述

南瓜饼变成了南瓜糕
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuetify字体图标不显示问题Material Design
weixin_48244940的博客
05-19 1470
小结记录一下，近期碰到的坑。项目写到一半，字体图标之前一直是显示的，在这两天突然全部不显示了，初步怀疑是改动了代码，把代码还原，依旧无法显示，各种搜，怀疑框架自带的字体出问题了，看vuetify官网介绍，字体图标是框架自带的。无需引入，尝试手动npm再次安装依赖试试， 于是执行官网命令发现，npm命令都无法识别（问了下朋友，可能这个npm包被删了或者npm包安装指令被修改了） Windows PowerShell 版权所有 (C) 2009 Microsoft Corporation。保留所有权利。.
富文本编辑器vue-quill-editor的安装以及自定义字体和字号(最为重要的是解决获取不到编辑框中的内容)
元宝的博客
07-06 1983
【代码】富文本编辑器vue-quill-editor的安装以及自定义字体和字号。
Vuetify配置及图标不显示
文和的博客
11-12 313
【代码】Vuetify配置及图标不显示。
vuetify2.0 断网图标显示问题
Iwonderyou的博客
08-25 471
文章目录vuetify2.0 断网图标显示问题联网引用（有风险）改为本地引用 vuetify2.0 断网图标显示问题 联网引用（有风险） 使用vue-cli构建vuetify项目时，默认图标和字体都是用的cnd方式引用(index.html)，刷新会导致vue项目变慢，而且断网后图标不能显示，网络延迟会导致图标变形. 改为本地引用 在vue-cli项目中找到index.html(一般位于项目根目录，public文件夹中)，将这两行注释掉, 安装materialdesignicons npm install
vue-quill-editor 中部分样式不显示问题
m0_51666430的博客
11-09 1835
前端项目使用了vue-quill-editor 富文本编辑框，在编辑内容时文本样式都能正常使用，但是上传之后查看文本，就会发现有些样式并没用加载出来。分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件。在需要显示文本内容的盒子中，加入类名ql-editor，且其父盒子加上类名ql-show。查看代码能看到，有些标签上面的类并没有编写。
vue2editor富文本编辑器（图片拖拽）
落下香樟树
10-23 1963
富文本编辑器vue2-editor 在后台管理系统开发的过程中，富文本编辑器是经常会用到的一种文本编辑工具。目前主流的富文本编辑器有很多，但总有一款是符合自己需求的。在周末花费了大约半天的时间，尝试了许多富文本编辑器，大体上功能都相差无几。主要是对富文本中图片的处理，各个种类的富文本对图片的处理差异还是挺大的。此处的所说的图片处理指的是图片的大小调整、位置调整、是否可以拖拽等。此次我使用的富文本编辑器是vue2-editor ,并结合实际情况进行了相应调整。 vue2-editor 富文本编辑器是基于 vu
vuetify-blackout-panel:显示消息或微调框的停电面板
04-05
@ aphorica / vuetify-blackout-panel ... 显示消息或微调框。 由三个部分组成： 停电组件 这是实际的停电组件。 需要将其导入并合并到模板html和以下代码中： ... <BlackoutComponent v-if=
基于Vue3 Vuetify的中后台管理模板
最新发布
04-03
这个模板结合了Vue.js的最新版本（Vue3）和Vuetify库的强大功能，为开发者提供了一个完整的解决方案来开发中后台管理系统。Vue3带来了许多性能优化和开发体验提升，而Vuetify则是一个强大的UI组件库，它支持Material...
VuetifyColorInput:Vuetify的颜色输入组件
05-14
Vuetify的颜色输入组件。 演示 依存关系 设置 npm npm i vuetify-color-input import VuetifyColorInput from 'vuetify-color-input' ; 使用树状系统。 import VuetifyColorInput from 'vuetify-color-input/a-...
Vuetify学习笔记(壹)：Vuetify的安装、颜色及样式、按钮和图标、不同尺寸设备的适配
01-08
Vuetify是什么 Vuetify是Vue.js的头号组件库 其通过一致的更新周期 对以前版本的长期支持 响应式社区参与 丰富的资源生态系统和对高质量组件的贡献来为用户提供构建丰富且引人入胜的web应用程序所需的一切 二、安装 ...
vuetify.zip
05-25
总之，Vuetify为H5项目提供了强大而灵活的UI解决方案，通过引入其CSS和JS文件，我们可以轻松地创建符合材料设计规范的用户界面。随着对Vuetify框架的深入理解和实践，你将能够构建出更加精致和高效的Web应用。
安装了VueDevtools插件但在控制台不显示Vue的解决方案
IT13333的博客
07-06 8424
出现问题 安装好Vue Devtools插件后，在Google浏览器中开发调试的时候，右上角的Vue图标变亮，但是在开发者工具中没有出现Vue调试。 如下图： 控制台的Vue调试应该如下图显示 分析原因 第一种情况：没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选 https://github.com/vuejs/vue-devtools 1. If the page uses a production/minified build of Vue.js, devtools in
vue3.0 解决浏览器小图标 ico图标更换不了的问题 记录
weixin_42508580的博客
03-09 1413
vue3设置ico图标审查元素显示如下 <!--[if IE]><linke rel="icon" herf="logo.ico" /><![endif]--> 解决方法 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpor
vuetify-icon图标显示不正常
张兴华的博客
05-23 1万+
因VM上使用的是内网，访问不了Google，所以vuetify中icon是显示不正常的，显示默认的text，如下: 而正常的应该如下： 如下提供了两种方法： 方法一： （可以访问Google的时候可以使用此方法-线上的） 在index.html中引入 <link href="https://fonts.googleapis.com/css?family=Material+Ic...
vue打包之后浏览器图标设置直接没有输出，vue打包之后浏览器图标不显示
weixin_43779406的博客
01-15 819
打包之前的部分index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <title>xxxx</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl.
vue项目修改浏览器图标以及标题
热门推荐
青衫折扇的博客
09-20 1万+
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 然后去index.html在head下添加： <link rel="icon" href="static/im......
vuetify2.0中icon显示问题
薛增辉的博客
08-28 2035
项目中需要用到文件上传功能，经查vuetify1.5中没有此功能，vuetify2.0中才有此组件。 于是在使用vue/cli3搭建的demo中安装vuetify2.0：npm install --save vuetify main.js中引入并使用vuetify，组件中使用v-file-input标签： //main.js // 引入vuetify import Vuetify from...
通过vue3.0创建一个vuetify的项目
lll19960406的博客
05-29 262
参考我上一篇文章https://www.cnblogs.com/bingchenzhilu/p/11690402.html 创建完成后，我创建的名称是vuetify 通过 cd vuetify到达该级目录 输入vue add vuetify命令 选择默认项即可，下图是安装成功的样子 打开的项目目录是这样的 使用yarn serve 运行项目------------...
vuetify treeview 修改展开箭头颜色
06-02
你可以使用 Vuetify 的 `theme` 属性来修改 `v-treeview` 组件的展开箭头颜色。具体的做法是在 `theme` 属性中设置 `treeview` 对象的 `arrowColor` 属性为你想要的颜色值，如下所示： ```html <template> <v-treeview :items="items" :active.sync="active" :open.sync="open" :load-children="loadChildren" :item-key="itemKey" :selectable="selectable" :multiple-active="multipleActive" :open-on-click="openOnClick" :open-transition="openTransition" :close-transition="closeTransition" :transition="transition" :hoverable="hoverable" :item-children="itemChildren" :search="search" :filter="filter" :disable-default-context-menu="disableDefaultContextMenu" :active-class="activeClass" :selected-class="selectedClass" :open-class="openClass" :item-class="itemClass" :item-children-class="itemChildrenClass" :transition-hide-on-close="transitionHideOnClose" :transition-hide-on-open="transitionHideOnOpen" :theme="{ treeview: { arrowColor: 'red' } }" ></v-treeview> </template> ``` 在上面的代码中，`theme` 属性中的 `treeview` 对象设置了 `arrowColor` 属性为 `'red'`，表示展开箭头的颜色为红色。你可以将 `'red'` 替换为你想要的颜色值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值