前言
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>