EasyUI使用iconfont图标

下载iconfont图标

iconfont官网
iconfont基本使用
我这里选择的微软免费图标：素材库->单色图标->microsoft（1504个图标）
下载图标：

控制使用代码批量加入购物车

js 复制代码

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click());
}

选择【添加至项目】
选择【font class】类型，下载到本地
把目录所有文件拷贝到easyui项目下

改造按钮等普通图标

引入iconfont的css，css和字体woff在同一目录
删除easyui原有icon.css（也可以不删除，可以和iconfont共存）
使用图标

js 复制代码

//原来按钮使用图标（原有图标是icon文件夹下的png图片）
<a href="#" class="easyui-linkbutton" iconCls="icon-add">新增一行</a>
//使用iconfont（单色字体）
<a href="#" class="easyui-linkbutton" iconCls="iconfont icon-jia_sekuai">新增一行</a>

改造tree树图标

easyui.css中找到tree相关css，大概3000行左右

css 复制代码

//注释原来的
/* .tree-folder {
  background: url('images/tree_icons.png') no-repeat -208px 0;
} */
/* .tree-folder-open {
  background: url('images/tree_icons.png') no-repeat -224px 0;
} */
/* .tree-file{
  background: url('images/tree_icons.png') no-repeat -240px 0;
} */

//添加新的
.tree-folder::before {
  content: "\ec9d";  /* 图标Unicode编码 */
  font-family: "iconfont";
  /* 其他字体样式同上 */
   font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color: red;
}
.tree-folder-open::before {
  content: "\ec9e";  /* 图标Unicode编码 */
  font-family: "iconfont";
  /* 其他字体样式同上 */
   font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color: blue;
}
.tree-file::before {
  content: "\ec9f";  /* 图标Unicode编码 */
  font-family: "iconfont";
  /* 其他字体样式同上 */
   font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color: orange;
}

使用图标

tree数组未指定图标时，会默认使用iconfont上面指定的
tree指定图标，只需要添加iconfont图标即可

json 复制代码

{
	"id":13,
	"text":"index.html",
	"iconCls":"icon-duigoux"
}

参考

使用Font-awesome3改造easyui图标

Font-awesome3已经不被官方支持，很难下载，所有使用iconfont替代