给element-ui的按钮增加图标

elementUI中的图标库是有限的，本文主要讲述如何在已有项目中使用iconfont中的图标。

Step1.找到iconfont项目中的图标所在地：资源管理 -> 我发起的项目(或我参与的项目)

Step2.点击“下载至本地”，下载图标库文件。

Step3.引用这6个文件：

假设将上面6个文件放到common/fonts/ 路径下，在main.js中引用：

import './common/fonts/iconfont.css'

在css中引用字体：

body{font-family: PingFangSC-Medium, PingFang SC, iconfont;box-sizing: border-box;
}

Step4. 给icon-开头的类设置样式：

[class*="icon-"],
[class^=icon-]{font-family: iconfont;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;vertical-align: baseline;display: inline-block;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.el-button [class*=icon-]+span{margin-left: 5px;
}

Step5.使用图标：

<el-button type="primary" icon="icon-daochu">导出</el-button>

效果：

给element-ui的按钮增加图标相关推荐

解决element UI 表格el-table增加列会震动抖动的问题
beforeUpdate(){this.$nextTick(() => {this.$refs.myTable.doLayout();}) }, 在element UI里面有一个doLayout ...
解决 element ui 本地使用引入图标不显示 .ttf和.woff 报错问题
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题原因因为文件内缺少两个文件根据控制台提示发现少了.ttf和.woff两个文件 1)element-ico ...
一篇解决Element ui密码框眼睛图标明文密文，不允许中文输入以及输入的各种校验
先上效果,再上代码,后面有说明代码我已经做到让你们复制粘贴就能用 HTML <el-form-item label="新密码" prop="cpPassword& ...
element UI 饿了么 UI 分页按钮不显示的问题
一个很坑的深坑 element UI 的按钮不显示的深坑 <el-paginationbackground@size-change="availableStore2TableH ...
element UI 饿了么 UI 分页按钮不显示的问题
https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的深坑 element UI 的按钮不显示的深坑 <e ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
自定义Element ui中el-upload上传后的文件图标
实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标首先想到的是去Element UI 查看有没有自定义的功能,后面发现底层源码写死的,那就不能自定义,就只能通过js操作了,我 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...

给element-ui的按钮增加图标

给element-ui的按钮增加图标相关推荐

最新文章

热门文章