【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端。使用element ui自带的icon太少,所以引入第三方的。截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅读后总结也不能正常引入第三方图标,所以决定写一篇引入引入第三方图标的教程。
1·基于阿里巴巴矢量图标库的一篇教程,地址;http://www.iconfont.cn/
2·进入网站登录账户后,新建一个项目;在该网站选择一些自己要用到的图标如上图点击购物车按钮添加到购物车。
3·把购物车添加的图标添加至自己新建的项目如下图
4·然后在下图,图标管理,我的项目里找到你项目所添加的图标。
5·除了从该网站选择你要用到的图标外还可以点击上图右上角处自己上传svg格式图标到阿里矢量库。( 官方推荐 使用 adobe illustrator 设计图标并提供了ai模板)
6·点击更多操作对该项目进行一些设置如下图:
输入图标前缀为了不和element ui 的图标冲突 所以在 原有的el-icon后面加上自己的项目名称。然后设置 font family 点击保存
7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图:
其中有一些demo 和 样例 不用导入项目,但是为了给其他人一个提示也最好直接把所有文件拷贝到自己的vue项目中的:
src/assets 下 新建一个 icon文件夹。然后打开iconfont.css,添加 代码如下
[class^="el-icon"], [class*=" el-icon"] {font-family:"iconfont" !important;/* 以下内容参照第三方图标库本身的规则 */font-size: 18px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数,请填写一致,比如我项目设置的参数ali-icon-***;那么在class="ali-icon"。 font-family=“iconfont”(注意:第二个class处前面有个空格)
修改完该文件 效果如下图:
8·然后在项目中要使用图标的页面 引入上面修改的css。在main.js 中引入:
import './assets/icon/iconfont.css'
重新编译启动前端 npm run dev
9·在项目中使用图标有两种方式 如 我的图标全称为el-icon-addition
1)icon属性
<el-button size="small" icon="el-icon-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">新增群组
</el-button>
2)class属性
<el-button size="small" class="el-icon-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">新增群组
</el-button>
#############完结#############
【Vue】 element ui 引入第三方图标相关推荐
- 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后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- vue+element ui 设置页面全屏 全屏和退出全屏的切换
vue+element ui 设置页面全屏 全屏和退出全屏的切换 方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏 返回类型 ...
最新文章
- php安装完成以后要复制php.ini文件
- 风险管理、收尾管理和知识产品管理
- 使用Ranger对Hive数据进行脱敏
- B+树检索的时间复杂度
- K-periodic Garland CodeForces - 1353E(暴力+贪心+dp)
- PWN-PRACTICE-BUUCTF-13
- MySQL入门 (二) : SELECT 基础查询
- 拖动卡顿_教你4招,让你的ps永不卡顿
- 利用GitHub搭建一个酷炫免费的个人博客
- 拓端tecdat|基于R统计软件的三次样条和光滑样条模型数据拟合及预测
- win10系统服务器怎样设置密码,win10系统的电脑如何给普通文件夹设置密码
- syn 攻击脚本 python_Python Scapy实现SYN Flood攻击
- 【Unity】Obi插件系列(一)—— 总览、Actors与Solvers
- 企业级带库走向大型化、智能化
- 300ETF期权适合进行短线交易吗?
- 中国绿色PPP项目行业现状及发展建议:投资规模不断扩大,需要改善存在的问题,进一步推动绿色PPP健康发展[图]
- 中企海外周报 | 中国众多品牌亮相IFA;喜茶新加坡第三家店开业
- edittextview 取消下划线
- 游戏夜读 | 简单认识一下爬虫
- GPGPU渲染GPU的工作原理和认知总结