EasyUI使用iconfont图标

EasyUI使用iconfont图标

下载iconfont图标

  1. 控制使用代码批量加入购物车
js 复制代码
var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click());
}
  1. 选择【添加至项目】
  2. 选择【font class】类型,下载到本地
  3. 把目录所有文件拷贝到easyui项目下

改造按钮等普通图标

  1. 引入iconfont的css,css和字体woff在同一目录
  2. 删除easyui原有icon.css(也可以不删除,可以和iconfont共存)
  3. 使用图标
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树图标

  1. 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;
}
  1. 使用图标
  • tree数组未指定图标时,会默认使用iconfont上面指定的
  • tree指定图标,只需要添加iconfont图标即可
json 复制代码
{
	"id":13,
	"text":"index.html",
	"iconCls":"icon-duigoux"
}

参考

使用Font-awesome3改造easyui图标

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

相关推荐
2301_7816686133 分钟前
前端基础 JS Vue3 Ajax
前端
上单带刀不带妹1 小时前
前端安全问题怎么解决
前端·安全
Fly-ping1 小时前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
SunTecTec1 小时前
IDEA 类上方注释 签名
服务器·前端·intellij-idea
在逃的吗喽2 小时前
黑马头条项目详解
前端·javascript·ajax
袁煦丞2 小时前
有Nextcloud家庭共享不求人:cpolar内网穿透实验室第471个成功挑战
前端·程序员·远程工作
小磊哥er2 小时前
【前端工程化】前端项目开发过程中如何做好通知管理?
前端
拾光拾趣录3 小时前
一次“秒开”变成“转菊花”的线上事故
前端
你我约定有三3 小时前
前端笔记:同源策略、跨域问题
前端·笔记
JHCan3333 小时前
一个没有手动加分号引发的bug
前端·javascript·bug