Vue Vuetify组件icon出不来

最新推荐文章于 2024-09-03 23:05:06 发布
最新推荐文章于 2024-09-03 23:05:06 发布
阅读量648 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39627579/article/details/121011284
版权
这篇博客介绍了如何在HTML文件中导入Google Fonts的Roboto字体和Material Design Icons的CSS样式，以提升网页的视觉效果和用户体验。通过引用外部CSS链接，开发者可以轻松地将这些流行的设计元素整合到自己的网站中。
摘要由CSDN通过智能技术生成

在public/index.html中导入样式

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

不太蓝的男孩子
关注
专栏目录
vuetify字体图标不显示问题Material Design
weixin_48244940的博客
05-19 1569
小结记录一下，近期碰到的坑。项目写到一半，字体图标之前一直是显示的，在这两天突然全部不显示了，初步怀疑是改动了代码，把代码还原，依旧无法显示，各种搜，怀疑框架自带的字体出问题了，看vuetify官网介绍，字体图标是框架自带的。无需引入，尝试手动npm再次安装依赖试试， 于是执行官网命令发现，npm命令都无法识别（问了下朋友，可能这个npm包被删了或者npm包安装指令被修改了） Windows PowerShell 版权所有 (C) 2009 Microsoft Corporation。保留所有权利。.
Vue 2.0、Vuetify 使用iconfont图标或者照片代码优化简化方案
tea_dragon的博客
10-17 379
文件，用来作为一个装载图标的地方。建议是用封装图标组件的名字，建议按照顺序来，便于查看，文件夹同级目录下创建一个。是用于判断是否使用该组件。
Vuetify配置及图标不显示
文和的博客
11-12 559
【代码】Vuetify配置及图标不显示。
vuetify图标不显示
最新发布
weixin_41899098的博客
09-03 46
【代码】vuetify图标不显示。
如何解决vuetify中图标不显示的问题或默认颜色显示不成功
weixin_43966566的博客
04-17 3697
1.在对应项目里安装依赖 npm install @mdi/font -D 2.在main.js中引入 import '@mdi/font/css/materialdesignicons.css' 3.保存之后页面会重新渲染，查看浏览器中显示结果 4.若图标显示成功但图标默认的颜色没有显示出来，若用的是vue2.X的版本，可以按如下修改，只需要将App.vue中的最外层的div改成v-a...
vuetify-icon图标显示不正常
张兴华的博客
05-23 1万+
因VM上使用的是内网，访问不了Google，所以vuetify中icon是显示不正常的，显示默认的text，如下: 而正常的应该如下： 如下提供了两种方法： 方法一： （可以访问Google的时候可以使用此方法-线上的） 在index.html中引入 <link href="https://fonts.googleapis.com/css?family=Material+Ic...
Vue加载Vuetify没有样式与颜色
Wzp的博客
01-21 1077
1.先按照官方的文档来安装好并且配置好main.js的全局配置 2.重点是！！！！！在App.vue下将template内部的所有内容用v-app包起来 <template> <v-app> <div id="app"> <router-view></router-view> </div> </v-app> </template> <script> export
vuetify3+vite，打包后mdi图标无法正常显示，及打包后首页白屏
OnismYY的博客
03-12 864
vietify3+vite,打包后mdi图标不显示，以及打包后白屏问题
nuxt+vuetify项目图标无法显示
junior_programmer的博客
09-23 1516
默认的远程加载图标 图标本质上就是字体，而vuetify默认从远程地址拉取css和字体文件所以在离线环境下必须使用本地加载字体的方式 默认的加载图标的方式如下 <link data-n-head="1" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> 使用离线方式加载 1.在nuxt
vuetify-toast-snackbar:使用Vuetify Snackbar组件的基本Vue Toast服务
05-07
具有 Snackbar组件的队列支持的基本Vue Toast服务。 灵感来自 安装 npm install vuetify-toast-snackbar 演示版 演示： : 用法 捆绑器（Webpack，汇总） import VuetifyToast from 'vuetify-toast-snackbar' Vue ....
如何用 Vue + Vuetify 快速建站？
热门推荐
闭眼卖布
06-20 1万+
懂点基础，学点套路，轻松用 Vue 写个网站 几个月前用 Vue + Vuetify 这一套框架写了个 仓库管理系统 和 个人网站，近来不写前端了，所以整理了如何用 Vue，Vuetify，Vuex，Vue-router 写一个单页应用 (SPA)，为以后回忆方便，也供初学者参考，少踩坑。 （这篇不是 Vue 的基础介绍，所以建议先读了 Vue 的官方文档，再来看怎么应用。） 这篇以开发的个人...
Vuetify Icon Picker
u011352988的博客
09-02 773
一个 Vuetify 中的 material design icons 选择器。 Preface 当使用 vuetify 框架实现诸如菜单管理业务时，面对 6000+ 个 Material Design Icons，你是否苦恼于没有一个合适的 icon 选择器? Vuetify Icon Picker 便是如此的一个组件！ 起步 安装 npm i vuetify-icon-picker 使用 在 2.x 版本的普通 vuetify project 中，在通过 html 头部 cdn 链接方式或者 npm
vue组件列表
lb812383331的专栏
07-08 1649
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/airyland/vux" Vux 基于Vue和WeUI的组件库 https://github.com/ElemeFE/mint-ui" mint-ui Vue 2的移动UI元素 https://github.com/iview/iview" iview 基于 Vuejs 的开源 UI 组件库 https...
前端使用vuetify库UI时，页面加载很慢的问题解决方法
sharleen84的博客
05-26 1135
当vue的ui使用了vuetify，在生产环境后期出现大白屏，加载很长时间后，才出来。进控制台，有库出现404丢失情况，如下图： 查看vuetify的引入情况，如下： import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: 'mdiSvg', // 'mdi'
[Vuetify] 解决mainterialicon加载慢
老码农重操旧事业
06-04 1111
通过Vue CLI创建的前端项目，安装Vuetify后，项目加载巨慢。参考 https://vuetifyjs.com/zh-Hans/features/icon-fonts/#material-design56fe6807安装到 修改 删除目录下的的以下代码。
Vue3实战笔记（02）--- 使用VUETIFY图标字体
山花的博客
05-05 823
Vuetify 开箱即支持 4 种流行的图标字体库—— Material Design Icons，Material Icons，Font Awesome 4 和 Font Awesome 5。今天为项目安装喜欢的图标。
一些热门的前端UI组件库(附用例)
weixin_46703850的博客
11-02 8002
一些热门的前端UI组件库
016、Vue-启动优化-压缩、CDN、懒加载
༺ bestcxx的专栏 ༻
11-07 574
Vue 优化
Vuetify使用本地图标资源
Dexter's Laboratory
03-04 6698
@vue/cli 4.2.3脚手架创建的Vuetify项目默认使用的是国外CDN上的Roboto和Material Design Icons资源,速度很慢甚至会加载失败,下面记录一下如何把这两个用本地资源代替 修改/public/index.html 删除下面两行引用 <link rel="stylesheet" href="https://fonts.googleapis.com/cs...
Vue 图片上传组件实现与解析
如果在实际项目中没有这个组件，可以使用Vue的内置组件或第三方图标库如Element UI或Vuetify的图标组件来替代。 总结，创建一个Vue图片上传组件需要考虑以下关键点： 1. 用户交互设计：如是否允许删除，如何显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值