element自定义图标;element自定义icon;element-ui自定义tab栏图标;

一、场景:element-ui本身提供了图标,但是不全面或者开发时候需要使用自定义图标展示。此时可以用到elemenUi的自定义图标。参考链接
在这里插入图片描述

二、html使用,和正常的element的 图标 i 标签使用一样,使用设置的类名class即可:

<i class="el-icon-my-statistic"></i>

三、css:设置图标样式:

//自定义图标名1
.el-icon-my-statistic {background: url('../../static/QRcode.png') center no-repeat; // 需要引入你的图标路径background-size: contain;display: inline-block;width: 15px!important;height: 15px!important;margin-left: 6px;
}
//content中是中文的Unicode编码; font-size:图标大小; visibility: hidden;来隐藏文字
.el-icon-my-statistic:before {content: '\8d3a';display: inline-block;width: 15px!important;height: 15px!important;margin-left: 6px;font-size: 15px;visibility: hidden;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

canvas文字居中;canvas画布文字右对齐;canvas画布文字左对齐;canvas文字自动换行;canvas设置行间距;

canvas参考手册 场景&#xff1a;画布绘制文本&#xff0c;使用 context.fillText(text,x,y,maxWidth)。文本对其也就是设置xy坐标问题。 以下的画布设定宽度假设都是width&#xff1a;500 一、canvas文本左对齐&#xff1a; 就是x轴设置为0即可。 var cdocument.getElementBy…

与朱元思书

风烟俱净&#xff0c;天山共色。从流飘荡&#xff0c;任意东西。自富阳至桐庐一百许里&#xff0c;奇山异水&#xff0c;天下独绝。 水皆缥碧&#xff0c;千丈见底。游鱼细石&#xff0c;直视无碍。急湍甚箭&#xff0c;猛浪若奔。 夹岸高山&#xff0c;皆生寒树&#xff0c;负…

el-cascader回显失败;el-cascader回显不出来

—我的是省市联动&#xff0c;选择时候是正常的&#xff0c;得到的绑定值是数组 [‘安徽’,‘黄山’]&#xff0c;没问题&#xff1b; 但是在详情查看时候&#xff0c;回显成[‘安徽’,‘黄山’]&#xff0c;下拉框却不显示回显值。 —原因&#xff1a;虽然data里初始化声明变量…

No grammar constraints (DTD or XML schema).....两种解决方法

From: http://www.cnblogs.com/yqskj/archive/2013/01/11/2857065.html 方法一&#xff1a;常用方法 关闭XML验证 工具栏&#xff1a;windows > preferences > xml > xml files > validation > Indicate when no grammar is specified:选择Ignore即可。 方法二…

数字金额加逗号;js给数字加三位一逗号间隔的两种方法;js数据格式化

需求&#xff1a;数字金额&#xff0c;按照三位一个逗号显示。既 千 百万 十亿 或者是按照固定的几位一个逗号展示。 方法1&#xff1a; <script type "text/javascript">//保留三位小数&#xff0c;toLocaleString() 方法可把一个 Number 对象转换为本地格…

项目管理软件伙伴https://www.huobanyun.cn/

现在项目管理软件市面上很多&#xff0c;但能够完全适合每家公司需求的比较难找&#xff0c;因为众口难调&#xff0c;每家公司都有自己的特殊情况&#xff0c;所以&#xff0c;建议考虑下有比较齐全的基础功能的标准化软件产品&#xff0c;同时又在项目管理开发能力上比较突出…

eclipse配置

eclipse 算是跨平台的开发工具了&#xff0c;而且使用的人群很多&#xff0c;虽然网上有很多答案&#xff0c;但我还是想整理下自己的答案&#xff0c;方便日后查询&#xff1a; 1. 编码设置 2. 解决No grammar constraints (DTD or XML schema) 3. [WARNING] Using platform …

el-form表单新增表单项动态校验;el-form校验动态表单v-if不生效;

场景&#xff1a;本文是两种表单校验 1.对于数组for循环&#xff0c;校验每一项 2.对于两个不同的字段&#xff0c;分别v-if显示隐藏的校验 一、新增和删除表单项&#xff0c;动态校验。 el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项 以下代码可直接复制&…

MT7628如何控制GPIO

查看datasheet和确认GPIO复用引脚scheme 通过查看mt7628 datasheet可以明确复用关系&#xff1a; 在这里我以I2S对应的GPIO引脚为例。 查看 mt7628an.dtsi 文件中对gpio的注册 $(TOPDIR)假定为宿主机上 OpenWrt 的编译目录。 在$(TOPDIR)/target/linux/ramips/dts/mt7628an.d…

.Net Core集成Office Web Apps(一)

最近开始学习.Net Core&#xff0c;并使用Visual Studio Code工具来开发。感觉开发起来特别的方便&#xff0c;但是有个头疼的地方&#xff1a;许多的类库被修改了&#xff0c;一时半会儿还熟悉不了&#xff0c;需要查阅官方API。。。 Microsoft Office Web Apps&#xff08;以…

el-upload上传组件的动态添加;el-upload动态上传文件;el-upload区分文件是哪个组件上传的。

需求&#xff1a;正常我们上传都是一个固定的文件传到固定的后端字段里去。 但是有可能遇到&#xff0c;这种自定义新增多个上传组件&#xff0c;也就是遍历数组似的多个同样的上传组件 此时就遇到一个问题&#xff1a;因为是遍历出来的上传组件&#xff0c;导致上传成功:on-su…

openwrt gpio控制与使用

查看datasheet和确认GPIO复用引脚scheme 通过查看mt7628 datasheet可以明确复用关系&#xff1a; 在这里我以I2S对应的GPIO引脚为例。 查看 mt7628an.dtsi 文件中对gpio的注册 $(TOPDIR)假定为宿主机上 OpenWrt 的编译目录。 在$(TOPDIR)/target/linux/ramips/dts/mt7628an.d…

git 配置图形比较工具

2019独角兽企业重金招聘Python工程师标准>>> 以meld为例&#xff0c;安装方式是sudo apt-get install A. 在/usr/local/bin 目录下创建extDiff 文件(注意: 目录可以是任意) cd /usr/local/bin sudo gedit /usr/local/bin 内容为: #!/bin/bash /usr/bin/meld "$…

推荐!!!前端将url转成blob和blob转成url;前端将文件流读取成url;前端将blob文件读取出url预览和下载

一般后端返回的地址&#xff0c;前端通过返回blob读取出url&#xff0c;然后使用a标签下载 方式一&#xff1a;通过接口将后端返回的文件流blob读取出url&#xff08;推荐推荐&#xff09; downLoadFileImg (fileUrl, fileName) {// 可下载&#xff0c;名称也有效 -- 推荐cons…

CH340电路设计

最近选用USB转串口芯片进行开发调试&#xff0c;在调研了各主流芯片的之后&#xff0c;觉得 CH340 系列的性价比很高&#xff0c;而且技术支持在国内&#xff0c;如果遇到问题解决起来也会方便很多。但是 CH340 / CH341 型号很多&#xff0c;具体选型就就该结合需求和芯片手册了…

vue拖拽列表----vuedraggable组件;ElementUI 实现Table组件实现拖拽效果

vue-draggable中文文档 简单的遍历list列表拖拽 部分元素不可拖拽参考&#xff1b; 部分不可拖拽参考 ElementUI 实现Table组件实现拖拽效果 列表的拖拽功能&#xff1a; 一、下载依赖 npm i -S vuedraggable二、页面使用 <template><div><vuedraggable cla…

filters获取data中的数据;filters使用data中的数据

如果直接在filters中通过this引入data数据&#xff0c;则无效获取不到。 可以通过filter方法传值 来获取data的数据使用 <div >{{formInline.bjthObj.insuranceCompanyName | CompanyVal(cops)}}</div>data () {return {insuranceCompanyName: ,cops:[],}}filters:…

spring MVC配置详解

From: http://www.cnblogs.com/superjt/p/3309255.html 现在主流的Web MVC框架除了Struts这个主力 外&#xff0c;其次就是Spring MVC了&#xff0c;因此这也是作为一名程序员需要掌握的主流框架&#xff0c;框架选择多了&#xff0c;应对多变的需求和业务时&#xff0c;可实行…

Altium Designer如何画虚线

流程如下&#xff1a; 在原理图上右键 --> Place --> Drawing Tools --> Line&#xff0c;在画线的时候按 Tab 键&#xff0c;然后将 Line Style 改为 Dashed&#xff0c;就可以画虚线了。