EasyUI使用iconfont图标

EasyUI使用iconfont图标

下载iconfont图标

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

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

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

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

改造按钮等普通图标

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

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

改造tree树图标

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

//注释原来的
/* .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;
}

2. 使用图标

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

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

参考

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