EasyUI 自定义组件 icon 图标

前言

EasyUI 自带的 icon 就二十多个（1.3.3版本）

明显是不足的，而且不能很好适应主题，如此一来，自定义 icon 就显得十分重要了

步骤

1、准备好图片

这里推荐一个挺好的图标库

图标下载

这里我从弄了如下一个

2、把图标传到项目路径下

（不一定要传到 EasyUI 的 themes/icons 的路径下，到时候在 .css 样式引用的时候知道在哪儿就行了）

3、在 .css 文件中声明

（不一定要在 EasyUI 里边的 icon.css 中，到时候记得引入即可）

.icon-myOK{background:url('icons/myOK.png') no-repeat left center;
}

4、导入 .css 文件即可使用

（当然基本的 jquery.js、easyui.js 文件要导入）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ITAEM团队</title><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css" /><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script><!--中文化--><script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script></head><body><button class="easyui-linkbutton" iconCls="icon-myOK" ng-click="pay()">___ok</button></body></html>

5、效果

EasyUI 自定义组件 icon 图标相关推荐

微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
Vue组件Icon图标处理方案
Icon图标处理方案记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过 ...
EasyUI中使用自定义的icon图标
我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里卖弄加入 ...
Element-Ui组件 icon图标
内置图标以下为Element 2.8.2版本提供的所有图标:
message组件 icon图标显示*号与无法关闭报错
适配的问题 svg太小是显示*号的 mes组件是全局组件在没有scope的style标签里设置.el-message-icon--success的fontsize 修改vue3版本 >= 3. ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
微信小程序（组件：路由、表单、媒体、自定义组件，插槽、组件通讯、侦听器、生命周期）
三.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
【Flutter】StatelessWidget 组件 ( Container 组件 | BoxDecoration 组件 | Text 组件 | Icon 组件 )
文章目录一.StatelessWidget 组件二.Container 组件三.BoxDecoration 组件四.Text 组件五.Icon 组件六. 相关资源一.StatelessW ...
小程序开发中使用公共组件icon丢失问题
在父组件中调用子组件icon图标不见开始以为是自己将icon.wxss,单独放在pages,导致调用icon时公共组件无法显示,然后将icon文件夹移到根文件夹下,但是还是显示不成功,于是去子组件页 ...