Vue Element-UI使用icon图标(第三方)--在线版
Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在Vue中使用是很方便的。
关于引用icon(第三方),有一种不用下载项目到本地的方法,
前言
element自带的有icon,使用起来也很方便。但是美中不足的是,官方提供的图标库只是部分,在需要新的icon时,我就想到了引入第三方icon。对我来说,阿里的icon库就很方便,之前的项目也是用的这个库。
先是查看了Element官方文档,没发现有提示如何引用第三方icon,就尝试Google一下教程。这里看到了方丈先生的文章Vue Element使用icon图标(第三方),按照他的方法试着操作了一遍,成功引用了。
但是我发现,每次新增或修改icon,我都要重新下载项目吗?
要怎么做,就可以只更新引用阿里icon的链接,在项目中像使用el-icon-iconName一样?
element使用icon的两种方式
思考过一番后,想到一个方法,既然下载到本地的也是去修改iconfont.css里面的内容,那我不就可以在index.html里面引用阿里的在线css链接,在App.vue里面,引入我要修改添加的样式。不就OK了吗?
想完就去尝试可能性。结果一如所想。下面是具体操作~
教程
关于在阿里icon上注册、登录、创建项目用来存放icon的具体流程,可以参考方丈先生的文章Vue Element使用icon图标(第三方)
1. 在阿里icon上创建一个给element扩展的项目
创建icon项目
按照上图中的步骤,创建一个element扩展icon项目,注意第4点
2. 添加icon到项目中
在图标库中找到你想要的icon后,加入购物车,然后点击右上角的购物车,把icon添加到你的element扩展项目里吧~
添加icon到项目中
3. 生成icon的在线css链接
生成在线css链接
4. 在Vue项目中,引用在线css链接和新建css样式文件 (重点)
4.1 在Vue项目中创建iconfont.css文件,当然名字自定义。
[class^="el-icon-ali"], [class*="el-icon-ali"]
{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
这里的 el-icon-ali 是我自己起的icon前缀名。
4.2 引用阿里项目在线的css链接
我是在index.html里面引用的。放在前面
link引用
4.3 引用自己创建的css文件
在main.js中引入
根据你创建文件的路径来引用哦。
PS:emmmmm.....其实我的main.js引用会报错,还没处理。我是在App.vue文件里面引用css的。(尴尬又不失礼貌的微笑
Vue Element-UI使用icon图标(第三方)--在线版相关推荐
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
最新文章
- django项目mysql中文编码问题
- proxmox超融合集群用户授权
- dart正则替换手机号中间四位为*
- web功底之强,实属罕见。。
- python中的语言特性_python自测——语言特性
- oop 类和对象的_实用程序类的OOP替代
- Java 9模块服务
- 三十一、K8s供应链安全2 - 镜像的检测及优化与yaml文件安全
- SQLServer根据.mdf,.ldf,.ndf文件恢复数据库
- 城市聚焦:全球十二大性感之城
- 苹果wifi网速慢怎么办_无线WiFi满格网速却很慢怎么办 如何提升网速【详解】
- python 文件格式转换_数据分析:基于Python的自定义文件格式转换系统
- Android AsyncTask的使用及泛式参数
- 硬盘SMART参数(05,C5)与(C7)解惑
- HMM(隐马尔可夫)笔记
- 计算机网络管理员模拟,计算机网络管理员(三级)技能模拟测试
- EasyMesh - A Two-Dimensional Quality Mesh Generator
- 【博学谷学习记录】超强总结,用心分享|产品经理需求分析方法简析
- Kafka教程-名词定义
- 【JAVA学习】java中怎么遍历HashMap(Iterator迭代器遍历)
热门文章
- 实操Tiktok一个月告诉你,10万粉丝轻松拿下?
- sql2012服务器桌面图标,Windows Server 2012 修改桌面图标
- 微机笔记——1.微型计算机概述
- TensorFlow2.0:索引和切片(1)
- Redis基础(十)——性能监控和监视器
- 花书+吴恩达深度学习(七)优化方法之基本算法(Momentum, Nesterov, AdaGrad, RMSProp, Adam)
- 线性回归-最小二乘python实现
- 深度为你解答怎么避免域名被微信拦截,微信域名防封需要注意哪些问题?
- Vue.use()与Vue.prototype
- 临床试验中lm是什么职位_据说!这是离临床试验成功最近的职位之一