最近在琢磨EasyUI做做UI界面, 后来发现自带的图标不怎么美观, 想整合改用 Font Awesome 图标, 加入项目后发现直接引用效果不佳, 容易出现图标偏移, 网上通常的解决方案是:定义一个class, 用于适配,在需要的图标位置添加class即可:
.e-icon{
//按实际需要调整
}
...
iconCls:'e-icon XXX',//引用class
...
但实际使用中效果并不是很理想, 基本上引用到的地方都需要调整,而且不同的组件调整的数值还有差异,需要对着实际的画面参照进行调整,使用起来不是很便利. 后来无意间发现了个小窍门,直接上代码(按钮):
var toolbar = [{
text:" 新增",
handler: function(){
//...
}
}];
就是这样,在text中直接加入标签,插入Font Awesome的class,让文本和图标捆绑成EasyUI的文本输出, 这样就不用每次都调整偏移了, 就通用性而言,一般需要图标的地方对于EasyUI都会有类似text,title这样的属性,直接插入标签很方便
PS: 对于textbox的图标,例如用户登录,还是需要使用到通用的方法, 不过名字要改为用"textbox-addon-right", 原因是textbox渲染后会出现一个带textbox-addon-right的span,像这样:
...
要调整这个的位置才能够移动图标,不过缺点是都会变╮(╯▽╰)╭
.textbox-addon-right{
/*right: 0px;*/
margin-top: 4px;
margin-right: 3px;
}