一、概述
EasyUI是一个基于jQuery的UI组件库，由于它的简单易用和丰富的插件，成为了广为使用的前端UI框架之一。而EasyUI Icon就是其中的一个插件。
二、EasyUI Icon的基本用法
EasyUI Icon是一组预定义的图标集，可以通过在HTML中设置标签和对应的class样式来使用。例如：
<i class="icon-add"></i>
其中，class为“icon-add”表示使用EasyUI Icon预定义图标集中的一个叫做add的图标。
三、EasyUI Icon的支持图标
EasyUI Icon支持多种常见的图标，下面列出部分常见图标：
- icon-add：加号
- icon-remove：减号
- icon-edit：编辑
- icon-save：保存
- icon-help：帮助
- icon-ok：确认
- icon-cancel：取消
- icon-reload：重新加载
- icon-search：搜索
- icon-print：打印
四、EasyUI Icon的颜色与大小
EasyUI Icon可以进行颜色和大小的定制。通过设置对应的CSS样式，可以实现不同颜色和不同大小的图标。
例如，设置颜色为红色：
.red{color:red;}
<i class="icon-add red"></i>
设置大小为20px*20px：
.size{width:20px;height:20px;}
<i class="icon-add size"></i>
五、EasyUI Icon的自定义图标
除了使用EasyUI Icon预定义图标集，还可以通过CSS样式来自定义图标。首先需要定义图标的字体以及对应的CSS样式，例如：
@font-face{
font-family:'myicon';
src:url('../fonts/myicon.eot');
src:url('../fonts/myicon.eot?#iefix') format('embedded-opentype'),
url('../fonts/myicon.woff') format('woff'),
url('../fonts/myicon.ttf') format('truetype'),
url('../fonts/myicon.svg#myicon') format('svg');
font-weight:normal;
font-style:normal;
}
.icon-myicon{
font-family:'myicon';
}
.myicon-a:before{
content:"\e000";
}
.myicon-b:before{
content:"\e001";
}
.myicon-c:before{
content:"\e002";
}
其中，@font-face定义了字体源文件的路径和字体名称，.icon-myicon定义了字体，分别对应了三个自定义图标myicon-a、myicon-b、myicon-c。其中content属性为字体映射的Unicode码。
接着，在HTML中使用自定义图标：
<i class="icon-myicon myicon-a"></i>
<i class="icon-myicon myicon-b"></i>
<i class="icon-myicon myicon-c"></i>
六、结语
通过以上几个方面的内容，我们可以清晰地了解EasyUI Icon的基本用法、支持图标、颜色和大小以及自定义图标等相关知识。
以上仅是EasyUI Icon的一些用法，EasyUI还有许多其他组件和插件，读者可以结合文档和实践来深入了解。
