[EasyUI美化换肤]更换EasyUi图标

EasyUI是一款非常实用的前端UI框架，拥有众多的组件和丰富的样式，但是默认的图标比较单一，不够美观，本篇文章将介绍如何对EasyUI的图标进行自定义更换的操作。

准备工作

在进行EasyUI图标的自定义更换前，我们需要先准备好两份文件：

• easyui.css文件：EasyUI的主CSS文件，用于设置EasyUI的样式
• easyui-icons.css文件：EasyUI的图标CSS文件，包含了EasyUI默认的图标样式

这两个文件在EasyUI的安装目录可以找到，具体的路径是：

easyui.css：easyui/themes/default/easyui.css
easyui-icons.css：easyui/themes/icons/easyui-icons.css

我们将以上两个文件拷贝到自己的项目中，方便后续的修改操作。

修改图标

EasyUI的默认图标是通过CSS的background属性来设置的，我们只需要更改对应的CSS样式即可。

首先，我们需要找到对应图标的样式，例如修改"icon-add"这个图标：

.icon-add{background-position:-24px 0}

这段CSS表示"icon-add"这个图标在一个24x24像素的图标集中的位置是左上角，位置为(0,0)。我们可以通过修改该CSS的background-position属性来更改图标。

例如，我们想将"icon-add"这个图标改成易于辨认的加号图标，可以找到一个相应的加号图标的位置，并将其坐标作为background-position的值。假设加号图标在图标集中的坐标为(0, -48)，那么我们可以这样来修改该图标的样式：

.icon-add{background-position:0 -48px}

这样，"icon-add"这个图标的样式就被修改为了我们想要的加号图标。

类似地，其他EasyUI的图标样式也可以通过修改相应的CSS样式来进行自定义更换。

总结

通过对EasyUI的图标CSS样式进行自定义更换，我们可以得到自己想要的美观的图标。这个操作比较简单，需要注意的是，修改样式时需要确保选择器的精确匹配以及图标坐标的准确性。