Jquery EeasyUI等框架中图标的处理方法
浏览数：58 /
时间：2015年06月09日
在使用Query EasyUI、Ext等框架开发项目的时候，经常会用到很多小的图标，常见几个图片应用方式总结如下：
一、在jQuery Easyui中添加小图标
1、添加图标的两小步：
先到themes目录下的icon.css中，添加新图标对应的CSS类选择器，参照已有的图标类，只要指定图标对应的路径即可，如下所示：
.icon-forward{
background:url(‘icons/forward.png‘) no-repeat;
}
然后将图标文件放置到icons目录下即可。
2、应用新图标不生效的问题
已经按上述的步骤处理了，但是用到窗口上时，一直都没效果。后来查看网页的源码得知，引入的jquery-easyui-1.2.6/themes/icon.css文件中没有加载新的样式类，当前使用的是firefox浏览器，估计可能是缓存的原因，所以清了一下缓存后重新刷了一下就有效果了。
二、CSS从大图片上截取小图标的操作
注：图片名称（tabicons.png）每个小图标width:18px;height:18px从左上角坐标为（-0px;-0px;）;
例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素
截取小图标样式
.icon
{
background: url(imges/tabicons.png) no-repeat;
width: 18px;
line-height: 18px;
display: inline-block;
}
.icon-set
{
background-position: -380px -200px;
}
.icon-add
{
background-position: -20px 0px;
}
样式调用示例
<form id="form1" runat="server">
<div class="icon icon-sys">
</div>
</form>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
