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替代

相关推荐
啃火龙果的兔子2 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~29 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了32 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_34 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计