文档章节

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

AlbertBoy
 AlbertBoy
发布于 2016/09/18 09:27
字数 418
阅读 193
收藏 1

最近在琢磨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;
        }

© 著作权归作者所有

AlbertBoy
粉丝 1
博文 6
码字总数 2083
作品 0
武汉
高级程序员
私信 提问
font-awesome与easyui结合

备忘记录 最近想重拾起来,做个ERP系统,做为一个前端盲,前端框架的选择是最头痛的问题 当前bootstrap与font-awesome的组合无疑是非常有吸引力的,从网上下了N多的后台框架模板,断断续续调...

itwarcraft
2014/10/25
4.5K
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 正式版发布

jQuery EasyUI 1.5.x of insdep theme 更新截图请移至下方,附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、...

magicweng
2017/03/20
2.6K
11
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
6.2K
24
jquery easyui 中的事件问题

easyUI的form表单中有很多种类型的标签,easyui-validate、easyui-textbox、easyui-combox、easyui-datebox、easyUI-datetimebox等等。 在使用easyui-textbox时,想通过onblure()事件做一些处...

wangaowell
2015/03/16
2.2K
1
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
4K
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部