修改|新增jquery-easyui icon图标

by:授客 QQ:1033553122

测试环境

jquery-easyui-1.5.3

修改配置文件

打开jquery-easyui-1.5.3\themes\icon.css文件,文件头部添加目标图标样式,例子:

.icon{

background:url('../../icons/tabicons.png') no-repeat;

width:18px;

height:18px;

display:inline-block;

}

.icon-set{

background-position:-380px -200px;

}

.icon-sys-set{

background-position:0px -220px;

}

.icon-person{

background-position:-200px -480px;

}

以上举例从大图中“抠取”小图标,如果是取整张图片作为小图标,可以如下

.icon-person{

background:url('../../icons/icon-person.png') no-repeat;

}

这里演示的是添加,也可以对原有的进行修改

注意:css样式存在优先级,之所以把自己添加的样式放文件最开头是为了避免覆盖框架自带的

 

引用图标

<span class="icon icon-sys-set">     </span>

Easyui 修改|新增jquery-easyui icon图标的更多相关文章

  1. EasyUI中使用自定义的icon图标

    我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里面加入我 ...

  2. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  3. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  4. jQuery EasyUI 入门简介

    对于前端开发者来说,在开发过程中应用“框架”这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架——jQuery EasyUI. 那什么是jQuery EasyUI呢? jQ ...

  5. jQuery EasyUI的各历史版本和应用

    from:http://blog.sina.com.cn/s/blog_b8be6dc40102xpe6.html 各历史版本下载地址: http://www.jeasyui.com/download ...

  6. bootstrap在input框中加入icon图标

    <form class="form-horizontal"> <div class="form-group has-feedback"> ...

  7. 基于JQuery easyui,gson的批量新增/修改和删除-servlet版

    最近项目需要用到在页面进行批量操作,做了一些这方面的学习,参照网上的资料写了个小例子,记录一下: 准备 引入gson-2.6.2.jar,这里使用gson而不使用json-lib,原因是json-li ...

  8. Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

    http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套 ...

  9. jquery easyui添加图标扩展

    easyui中有很多通过iconCls="icon-reload"这样的属性引入小图标显示,当然我们也可以自己添加自己的小图标. 方式:1.我们可以在jquery easyui的文 ...

随机推荐

  1. 精选 TOP45 值得学习的Python项目

    精选 TOP45 值得学习的Python项目 [导读]热门资源博客 Mybridge AI 比较了 18000 个关于 Python 的项目,并从中精选出 45 个最具竞争力的项目.我们进行了翻译,在 ...

  2. FFmpeg 结构体学习(六): AVCodecContext 分析

    在上文FFmpeg 结构体学习(五): AVCodec 分析我们学习了AVCodec结构体的相关内容.本文,我们将讲述一下AVCodecContext. AVCodecContext是包含变量较多的结 ...

  3. [Swift]LeetCode546. 移除盒子 | Remove Boxes

    Given several boxes with different colors represented by different positive numbers. You may experie ...

  4. Java数据结构和算法 - TreeMap源码理解红黑树

    前言 本篇将结合JDK1.6的TreeMap源码,来一起探索红-黑树的奥秘.红黑树是解决二叉搜索树的非平衡问题. 当插入(或者删除)一个新节点时,为了使树保持平衡,必须遵循一定的规则,这个规则就是红- ...

  5. 学习HTML5 canvas遇到的问题

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

  6. 想成为Python全栈开发工程师必须掌握的技能

    什么是Python全栈工程师? 即从前端页面的实现,到后台代码的编写,再到数据库的管理,一人可以搞定一个公司网站的所有事情,真正实现全栈开发. 全栈只是个概念 也分很多种类 真正的全栈工程师涵盖了we ...

  7. iOS模拟器使用

    在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结一下. 1 首先,我们了解一下模拟器中常用的 ...

  8. Docker基础命令和时区问题

    Docker 命令 1. 安装Docker # ubuntu系统安装 $ sudo apt install docker-ce # 启动docker $ sudo systemctl start do ...

  9. Java集合类常见的问题

    本篇文章将尝试回答一些Java集合类常见的问题,以作知识梳理之用. ArrayList和LinkList以及Vector的区别 就实现方式而言: ArrayList是以数组的方式实现的列表. Link ...

  10. ionic4+angular6 混合移动开发 capacitor cordova

    首先要更新或者安装 ionic cli npm install -g ionic 创建项目 ionic start ionic-angular tabs --type=angular –type=an ...