vue element-ui引入第三方图标 在线版
参考链接:Vue Element-UI使用icon图标(第三方)–在线版 - 简书
vue项目版本为vue3
打开iconfont-阿里巴巴矢量图标库,注册登录之后回到首页
在首页顶部菜单 图标管理>我的项目
点击新建项目
新建项目
项目名称随意
记住设置的前缀,一会儿要用
去图标库里搜索选择自己需要的图标
加入到购物车
点击菜单栏上的购物车
添加至项目
选择刚才创建的项目
点击确定
跳转至项目页
点击Font class
鼠标箭头放到图标上可以更改名称
点击生成代码并复制
在vue项目的public/index.html里添加一个link标签,全局引入样式
在浏览器地址栏粘贴刚才复制的在线样式链接,复制.iconfont
部分的样式
在vue项目的src/assets创建ali-iconfont.css文件
粘贴刚才复制的样式,并把类修改为[class^="ali-icon-"], [class*=" ali-icon-"]
注意:ali-icon-是刚才图标项目设置的前缀,class*=""里面的ali-icon-前面有一个空格
在vue项目的src/App.vue(Vue项目页面入口)中用style标签引入iconfont.css
重启vue项目
在阿里图标库的项目页复制需要使用的图标代码
最后使用方式和element-ui自带el-icon一样
后续添加新图标只需更新代码将public/index.html中引入的在线链接替换即可
vue element-ui引入第三方图标 在线版相关推荐
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- VUE ---element ui 引入第三方 iconFont
引入第三方图标(icon)的教程 一.简介,以下是 阿里妈妈MUX 倾力打造的矢量图标 库 1.打开官网: http://www.iconfont.cn/ 2.进入网站登录账号(3选1登录) ,登录成 ...
- vue+element-ui项目引入第三方图标库:阿里巴巴矢量图标库(问题:小方框)
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
- vue element ui引入阿里库的图标
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- 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后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
最新文章
- python timeit计时_如何使用Python的timeit计时代码段以测试性能?
- hdu6380(2018 “百度之星”程序设计大赛 - 初赛(B))
- 可视化日历(Java实现)
- (25)FPGA计数器设计(SV代码实现)
- 详细版【卷积神经网络CNN】基础模型(邱锡鹏)
- caffe 安装方法(python)
- linux 802.11无线网卡驱动,Linux无线网络配置——无线网卡驱动安装与WLAN802.11配置...
- 数据挖掘案例实战:利用LDA主题模型提取京东评论数据(四)
- IO HANG是什么
- 一文搞懂蓝绿部署和金丝雀发布
- Android设备root及xposedPrivacy的安装
- Avamar 10007报错解决
- IDEA自带插件的实体生成详细教程,离线情况下如何导入MySQL的驱动
- 圆锥的表面积和体积计算
- The c program language 1
- 《Python从入门到实践》读书笔记——第五章 if语句
- 环境配置:前端程序员快速进行开发
- vue3 - diff算法之快速diff算法
- NCE4 L3 Matterhorn man
- 我的日记本开发手记——概述
热门文章
- [Mailbox]SIM卡中Alpha Identifier域解析
- iOS - 苹果审核被拒3.2(f)
- TFT屏幕的显示阴影问题
- HBase MOB特性介绍
- 拼多多二级限制惩罚要多久?怎么快速解除?
- JDK11变化详解JDK8升级JDK11详细指南
- 【整理】嵌入式系统的各种常见外设
- 成就更好的自己,就是不停地做减法
- PROE5.0飞利浦耳机结构设计教程
- 【Hide-and-Seek】《Hide-and-Seek: A Data Augmentation Technique for Weakly-Supervised Localization xxx》