关于EasyUI和Font Awesome 整合的小发现

最新推荐文章于 2022-04-16 20:57:55 发布

choubo6442

最新推荐文章于 2022-04-16 20:57:55 发布

阅读量247

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/albertboy/blog/747808

版权

最近在琢磨EasyUI做做UI界面, 后来发现自带的图标不怎么美观, 想整合改用 Font Awesome 图标, 加入项目后发现直接引用效果不佳, 容易出现图标偏移, 网上通常的解决方案是:定义一个class, 用于适配,在需要的图标位置添加class即可:

    .e-icon{
        //按实际需要调整
    }
    ...

    iconCls:'e-icon XXX',//引用class
    ...

但实际使用中效果并不是很理想, 基本上引用到的地方都需要调整,而且不同的组件调整的数值还有差异,需要对着实际的画面参照进行调整,使用起来不是很便利. 后来无意间发现了个小窍门,直接上代码(按钮):

    var toolbar = [{
        text:"<i class='icon-plus'/>&nbsp;新增",
        handler: function(){
            //...
        }
    }];

就是这样,在text中直接加入标签,插入Font Awesome的class,让文本和图标捆绑成EasyUI的文本输出, 这样就不用每次都调整偏移了, 就通用性而言,一般需要图标的地方对于EasyUI都会有类似text,title这样的属性,直接插入标签很方便

PS: 对于textbox的图标,例如用户登录,还是需要使用到通用的方法, 不过名字要改为用"textbox-addon-right", 原因是textbox渲染后会出现一个带textbox-addon-right的span,像这样:

<span class="textbox-addon textbox-addon-right" style="right: 0px;">...</span>

要调整这个的位置才能够移动图标,不过缺点是都会变╮(╯▽╰)╭

        .textbox-addon-right{
            /*right: 0px;*/
            margin-top: 4px;
            margin-right: 3px;
        }

转载于:https://my.oschina.net/albertboy/blog/747808

关注