文档章节

easyUI添加自定义图标

林梓阳
 林梓阳
发布于 2017/05/01 20:36
字数 383
阅读 10
收藏 0

    相信很多的程序员都或多或少的用过easyUI 这一前端框架,它给予了开发者很便捷的界面开发。而在界面开发中,图标的使用自不在少,在easyUI 这一框架中,我们可以通过 这样的书写方式来为某个元素添加图标。

    然而,easyUI 所提供的图标库有一定的限制,笔者在试图使用 “主页” 这样的图标时,发现它并不提供该图标。后来笔者通过查看 easyUI 的源码的方式,解决了该问题。那么需要怎样添加自定义的图标呢?方法如下:

    首先是图标的获取,笔者推荐上 “阿里巴巴矢量图标库” 来进行图标的获取。获取到图标之后,比如这样一个 “主页” 图标,将它重命名,好比命名为 “home.png”。

    然后打开 easyUI 封装的文件包,找到 “themes” 这样一个文件夹,将 “home.png” 文件放入 “themes” 目录下的 “icons” 文件夹中。

    解决图标文件问题后,还需要增加代码。在 “themes” 目录下有一个 “icon.css” 文件,打开该文件,我们发现它的书写方式形如:

.icon-blank{
    background:url('icons/blank.gif') no-repeat center center;
}

我们可以这样增加代码来获取 “home.png” 图标文件:

    .icon-home{
    background:url('icons/home.png') no-repeat center center;
}

至此问题解决,在页面引用中,我们通过  data-options="iconCls:'icon-home'"  这样的写法就可以加载该图标了。效果如图

© 著作权归作者所有

共有 人打赏支持
林梓阳
粉丝 5
博文 52
码字总数 24831
作品 0
厦门
程序员
私信 提问
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
5.3K
24
font-awesome与easyui结合

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

itwarcraft
2014/10/25
0
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC2 发布

JQuery EasyUI 1.5.x Of Insdep Theme 1.0.0 RC2 下方附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupl...

magicweng
2017/02/27
2K
5
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0
easyui为tabs添加右键菜单

挂上一图,看看效果,菜单就是easyui的menu组件,使用者可以为菜单选项添加图标,定义样式,甚至可以设置多级结构的菜单。 <div id="rcmenu" class="easyui-menu" style=""><div data-option...

Jialy
2014/04/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
3
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部