文档章节

easyUI添加自定义图标

林梓阳
 林梓阳
发布于 2017/05/01 20:36
字数 383
阅读 8
收藏 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
博文 50
码字总数 24369
作品 0
厦门
程序员
font-awesome与easyui结合

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

itwarcraft
2014/10/25
0
0
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
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

维护“修理权”,苹果使用专有软件工具来修复MacBook Pro和iMac Pro

根据上月发给苹果授权服务提供商的一份文件,苹果公司正在使用新的专有软件诊断工具来修复MacBook Pros和iMac Pros,如果不用专有软件工具来修复关键部件,将会导致“系统失效和修复不完整”...

linuxCool
6分钟前
0
0
cacti监控安装

cacti是用PHP实现的一个软件,它用snmp服务获取数据,然后用rrdtool存储和更新数据,并生成图表展示。比较适合用于交换机、路由器的网络监控,插件众多,可图示化显示网络状况。 cacti官方推...

hiwill
36分钟前
1
0
shell特殊符号、cut、sort、uniq、wc、tee、tr、split命令

10月15日任务 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 cut 命令 cut作用:截取字符串 用法如下:cat /etc/passwd |head -2 |cut -d ...

hhpuppy
今天
1
0
Springboot实现filter拦截token验证和跨域

背景 web验证授权合法的一般分为下面几种 1使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需要引入其...

funnymin
今天
3
0
linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部