简介：这是一套针对 jQuery EasyUI 1.3.4 的图标与样式资源包，目标用户是使用 EasyUI 框架搭建后台管理界面或业务系统的前端工程师。EasyUI 基于 jQuery，提供对话框、表格、菜单等成熟组件，而该版本的图标与样式定义恰好解决了界面视觉统一的问题。压缩包约 825KB，内含 icon.css 样式定义与配套图标素材，覆盖操作状态（成功、警告、错误）、导航箭头、添加、删除、编辑等常用功能，并支持多格式显示，可适配不同背景与高分辨率屏幕。使用方式非常灵活：既可在 HTML 元素上直接引用 CSS 类显示图标，也能通过 EasyUI 插件机制为面板或对话框动态添加，还可基于现有类调整颜色、尺寸、边距等属性，从而贴合项目整体风格。这套资源的实用价值在于，开发者无需从零设计图标，只需查询对应类名即可快速插入，同时能参考其样式结构建立自己的组件规范。已有 204 人学习下载，特别适合正在维护 EasyUI 1.x 项目的团队，能显著减少前端样式的重复工作量，提升开发效率和界面美观度。

1. EasyUI 1.3.4 的图标与样式：一个老库为什么还有翻新价值

如果你维护过三到五年前交付的后台管理系统，大概率碰过这类需求：老板指着屏幕说“这个按钮加个图标”，你打开控制台一看，项目用的是 jQuery EasyUI 1.3.4，图标类名全是icon-edit、icon-save这种老面孔。这套老库的图标和样式，本质上是一套16×16 像素的精灵图（CSS Sprite）+ 按主题拆分的样式表，类名即约定，写对类名就有图标，写错就是白方块。我见过不少新入行的同事在这上面卡一夜，不是因为难，而是因为“根本不知道有哪些类名能用、哪些样式能调”。

这篇文章就解决三件事：一是把 EasyUI 1.3.4 的图标体系和样式原理讲透，让你拿到一个类名知道它对应什么、能不能改尺寸、能不能换颜色；二是给出一套可直接抄的配置和扩展方案，覆盖常见后台场景；三是把那些只可意会的坑摊开来讲。适合正在维护老项目的人，也适合刚接手这类代码无从下手的开发者。下面进入正题。

2. 图标系统拆解：从类名到精灵图的映射逻辑

2.1 图标类名的命名规律与调用方式

EasyUI 1.3.4 的图标不是字体图标，也不是独立图片文件，而是把所有小图标拼进一张 PNG 精灵图里，通过 CSS 的background-position定位来显示。图标类名统一为icon-前缀，比如icon-add、icon-remove、icon-search。调用方式分两种，第一种最常见——在组件上直接指定：

<a href="javascript:;" class="easyui-linkbutton"><span class="icon-search"></span>

这种情况不需要任何 JS 初始化，只要页面引入了主题 CSS 就能显示。逻辑上，.icon-search这个类定义了两条核心规则：background-image指向精灵图，background-position指向图标在图中的坐标。EasyUI 1.3.4 的默认主题中，图标间距是 18 像素，图标本身 16×16，剩余 2 像素是间隔，所以第二行图标的纵坐标是 18px，第三行是 36px。

参数说明：iconCls的值必须是一个完整的类名，不能带点号，也不要加引号之外的空格。多个类名用空格分隔是无效的，EasyUI 不会帮你拆开。想同时挂两个图标，只能自己写 CSS 叠加，后面扩展章节会讲。

2.2 全量图标清单：背不下来就查这张表

网上流传的图标清单大多不完整，而且很多是混着版本写的，1.3.4 和 1.4.x 的图标类名有差异。我按主题包梳理了 1.3.4 里能直接用的常用类名，按功能分组整理成表。核对方式很简单：打开浏览器控制台，输入$('.icon-add').css('background-position')，看返回的坐标值落在精灵图的哪个区域，就能验证当前引入的图标库版本。

快捷验证类名是否有效的命令：

# 在浏览器控制台执行，前提是页面已引入 EasyUI 的 CSS document.querySelectorAll('[class^="icon-"]').forEach(function(el) { var pos = getComputedStyle(el).backgroundPosition; console.log(el.className, pos); });

这段代码会列出页面上所有以icon-开头的元素及其背景定位。逻辑说明：getComputedStyle拿到的是最终生效的 CSS 值，如果类名不存在，background-position会是默认的0% 0%或空值，同时背景图路径指向 none，你就能快速判断是类名拼错还是 CSS 没引全。

参数说明：这段脚本不影响页面状态，只做读取，可以在任何 EasyUI 页面上直接跑。如果你的项目用了不同主题（比如 metro），类名不变，但坐标值会和默认主题不同，因为 metro 主题的精灵图布局不一致。所以跨主题排查时，不要硬记坐标，要看背景图 URL 和 position 的相对关系。

2.3 图标不显示时先查这三处

拿到图标类名但页面上是空白或者一个方块，这是 EasyUI 项目里最常见的“玄学”现象。其实就三个原因：CSS 文件路径不对、类名大小写写错、组件初始化顺序太早。

<!-- 错误示范：引了 JS 但没引主题 CSS --> <script src="jquery.easyui.min.js"></script> <!-- 正确顺序：jQuery → EasyUI CSS → EasyUI JS --> <link rel="stylesheet" href="themes/default/easyui.css"> <script src="jquery.min.js"></script> <script src="jquery.easyui.min.js"></script>

逻辑说明：EasyUI 的图标样式全部定义在主题 CSS 里，JS 只负责把iconCls的值写到 DOM 上，不负责生成任何背景图规则。如果 CSS 没引进来，类名挂上去了也没有视觉表现。另外，1.3.4 的 CSS 和 JS 有版本配套问题，混用 1.3.4 的 JS 配 1.4 的 CSS，图标坐标会错位——不同版本精灵图的图标顺序和间距都变过。

参数说明：easyui.css的路径跟随主题文件夹，默认是themes/default/easyui.css。如果你用了themes/metro/easyui.css，图标风格会从拟物变成扁平，但类名体系一样。绑定iconCls时注意大小写，icon-Edit和icon-edit是两个类名，CSS 里定义的通常是全小写。

3. 样式主题：四套内置主题的选择与定制路线

3.1 主题切换机制与内置主题差异

EasyUI 1.3.4 的主题机制非常简单粗暴：不同主题就是不同的 CSS 文件，内部定义相同的类名，但颜色、边框、圆角、图标风格各自独立。切换主题不是靠 JS 动态换肤，而是靠你换<link>的 href。默认自带主题里，常见的有default（蓝色系）、gray（灰白系）、black（黑色系）、metro（扁平无圆角铜色系）、bootstrap（蓝灰配色）。

各主题核心差异表：

切换主题不用改任何业务代码，只改一行引用：

<!-- 换主题 = 换 CSS --> <link rel="stylesheet" href="themes/metro/easyui.css">

逻辑说明：所有主题都复用同一套类名体系（.panel、.datagrid、.linkbutton等），EasyUI JS 读取的类名是写死的，不关心具体颜色值。所以主题切换对 JS 是透明的。但要注意，主题文件夹里除了easyui.css，还有一个icon.css，部分定制版主题把图标单独拆出来了。如果只引用了easyui.css没引icon.css，按钮、菜单里所有图标都会消失。

参数说明：themes/目录是相对路径，部署到子目录时容易出错。我一般会在 HTML 头部用绝对路径或<base>标签固定根路径，避免不同页面层级引用 CSS 时路径层层回退导致 404。

3.2 定制主题的两种路子：覆盖与源码改造

定制样式需求通常分两类：换颜色和换布局风格。换颜色最简单的方法是追加一个自己的 CSS 文件，覆盖 EasyUI 的变量。EasyUI 1.3.4 用的是写死的颜色值，没有 CSS 变量，所以覆盖需要逐个挑选择器。

/* custom.css — 追加在 easyui.css 之后 */ .datagrid-header .datagrid-cell { font-weight: 600; color: #333; } .panel-title { font-size: 14px; letter-spacing: 1px; } .linkbutton { border-radius: 2px; }

逻辑说明：因为 EasyUI 的样式优先级取决于加载顺序，放在后面引用的 CSS 天然覆盖前面相同权重的规则。这条覆盖路线不需要动库文件，升级时不会冲突，是我最推荐的做法。但要注意：如果 EasyUI 里用了!important（老版本里较少出现，但定制主题里可能有），覆盖就会失效，这时要检查源 CSS 找到那条规则的完整选择器，提高自己的选择器权重来压制。

参数说明：改造组件内部的细节，比如表格行高、工具栏间距，需要打开控制台查看实际 DOM 嵌套层级，EasyUI 的 DOM 结构比 jQuery UI 更深，盲目写.datagrid-row可能只覆盖了最外层，内层元素纹丝不动。建议先展开元素面板看清楚再写选择器。

3.3 深挖easyui.css的结构与可覆盖规则

easyui.css的文件结构是按组件分块的，顺序大致是.panel→.window→.datagrid→.linkbutton→.menu→.tabs等。每个组件块里，先定义组件根节点的边框底色，再定义内部元素的具体样式。理解这个区块结构，你能快速定位修改目标。

/* easyui.css 内部结构示意（节选） */ .panel { border-color: #95B8E7; /* 面板边框 */ background: #E0ECFF; /* 面板底色 */ } .datagrid-header { background: #E0ECFF; /* 表头背景 */ } .linkbutton { background: #E0ECFF; /* 按钮底色，注意很多组件共用这个色值 */ border-color: #95B8E7; }

逻辑说明：老版本 EasyUI 的一个显著特点是“同色值复用”——很多组件直接复制粘贴了同一组颜色，没有抽公共变量。所以你在覆盖时改了.panel的边框色，.linkbutton的边框可能纹丝不动，因为各自写了独立的色值。定制时要有心理准备：看起来应该联动的地方，实际上要逐个组件调。

参数说明：如果你需要批量调整主色调，可以在自己 CSS 里用属性选择器写一组规则，但效率不高。更顺手的做法是把easyui.css里的色值全部查找替换一遍，生成一个自用主题文件。这种方式适合一次性改造完不再升级的场景，因为后续升级 EasyUI 版本时，改动会全部丢失。

4. 实战落地：把图标与样式整合进典型后台页面

4.1 构建带完整图标工具栏的列表页

后台系统最常见的布局是上面工具栏、中间表格、下面分页条。工具栏按钮几乎都要挂图标。我用一个标准示例演示从 HTML 到初始化参数的完整写法：

<div id="toolbar"> <a href="javascript:;" class="easyui-linkbutton" id="btnAdd">function statusFormatter(value, row, index) { if (value === 1) { return '<span class="icon-ok" style="vertical-align:middle;"></span> 启用'; } else if (value === 0) { return '<span class="icon-no" style="vertical-align:middle;"></span> 停用'; } return '<span class="icon-question" style="vertical-align:middle;"></span> 未知'; }

逻辑说明：EasyUI 的 formatter 机制是“返回 HTML 就插 HTML”，不会帮你过滤标签。这里把icon-ok、icon-no以纯 CSS 的方式嵌进单元格，背景图由主题 CSS 提供，文字和图标用vertical-align对齐。这个写法比单独引入图片更省请求，也是 1.3.4 时代的性能优化习惯——一张精灵图全搞定。

参数说明：formatter 的参数签名固定是(value, row, index)，value是当前列字段值，row是当前行数据，index是行序号。如果你要修改图标和文字之间的间距，直接在返回的 HTML 里给span加 margin-right 样式即可。

4.3 菜单与树的图标联动

侧边菜单是后台系统的另一个高频场景。EasyUI 的accordion搭配树形菜单，每个节点都能挂图标：

<div id="sideMenu" class="easyui-accordion"><a href="javascript:;" class="easyui-linkbutton"><link rel="stylesheet" href="themes/default/easyui.css?v=20240520"> <link rel="stylesheet" href="custom.css?v=20240520">

参数说明：v是查询字符串，随便取什么名，但每次发版本改一下值，比如带日期或构建号，就能绕过缓存。这个方法在开发环境下同样有效，省得每次清缓存。后端模板里可以把参数做成全局变量统一输出，避免每个页面手改漏改。

6. 进阶玩法：把 1.3.4 的图标体系扩展成自己的设计语言

先讲一个验证方法：你在控制台里跑$.fn.linkbutton.defaults，能看到所有 linkbutton 的默认参数，包括iconCls、plain、toggle等。这说明 EasyUI 1.3.4 是支持“改默认值”的，你可以在页面加载后、组件初始化前，把全站按钮的默认图标和样式统一改掉。这个能力配合自定义 CSS，就能在不动业务代码的前提下，把老系统往新视觉拉一把。具体做法是写一个独立脚本，在 EasyUI JS 加载后执行：

// easyui-custom-init.js $.fn.linkbutton.defaults.plain = true; $.fn.linkbutton.defaults.iconAlign = 'left'; $.fn.linkbutton.defaults.iconCls = 'icon-none'; // 默认不显示图标，避免全部按钮都有图标 // 全局统一设置 datagrid 的分页栏样式（易读性更高） $.fn.datagrid.defaults.pagination = true; $.fn.datagrid.defaults.striped = true;

逻辑说明：改了defaults后，后续所有新初始化的组件都会带上这些参数，相当于给框架打了一层“局部补丁”。这也是我处理多页面后台的一致性问题时最顺手的手段——不用翻几十个页面去调整按钮参数。

接着讲图标扩展。1.3.4 的图标数量有限，业务一复杂就会遇到找不到合意图标的尴尬。我最常做的扩展是“借位置”：在现有精灵图上利用空白区域绘制自定义图标，然后追加自己的 CSS 类：

/* custom-icons.css — 追加在 easyui.css 和 custom.css 之后 */ .icon-export { background: url('icons/custom_sprite.png') no-repeat 0 0; width: 16px; height: 16px; } .icon-import { background: url('icons/custom_sprite.png') no-repeat -18px 0; width: 16px; height: 16px; } .icon-audit { background: url('icons/custom_sprite.png') no-repeat -36px 0; width: 16px; height: 16px; }

参数说明：这里custom_sprite.png是我们自己做的 16×16 图标合集，每个图标占 16px，间距 2px，和 EasyUI 默认精灵图的网格对齐，混用时视觉上不会违和。-18px 0代表取第二帧，正好落在图标网格上。如果你的图标间距和 EasyUI 不同，测量一下相邻背景定位的差值就知道间距值了。类名统一用icon-前缀，iconCls直接就能引用，业务侧无感知。

最后说一个日常习惯：我对 EasyUI 1.3.4 维护时，始终把“可回退”放在首位。每次加自定义样式前，我会先截一张全页面原始效果图；每次改完 CSS，至少跑三个浏览器看渲染差异。还有，任何新增图标类名都必须配一个页面级的引用示例，因为图标的 I D 记忆很容易消退，三个月后你绝对记不住icon-audit是哪个图标。这个做法帮我少踩了很多“找不到上次加的图标”的坑。如果你也想长期维护老库，建议从现在开始记录一份“本项目的图标样式清单”，每次改动都在上面补一行。希望这些内容和踩坑经验帮到你，下次再遇到笑脸方块或者错位图标，一分钟就能定位问题。

本文还有配套的精品资源，点击获取