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图片）
//使用iconfont（单色字体）
改造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替代