Easyui 修改|新增jquery-easyui icon图标

修改|新增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>

原文地址:https://www.cnblogs.com/shouke/p/10388830.html

时间: 2024-10-09 02:57:42

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

【转】 博客园自定义样式修改标签页的icon图标

有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢? 按照以下四步你也可以实现自定义标签图标. From To 第一步:挑挑拣拣 选一张icon图标(尺寸不要太大)不然加载会很慢 如果想通过自己的图片生成favicon,可以使用这个网站: Favicon Generator. For real. 第二步:传文档 在博客园的设置界面选择文档,将你喜欢的图片上传上来 第三步:写代码 在设置中的页脚Html代码中插入以下script脚本

第 1 章 jQuery EasyUI 入门

学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下载及运行 jQuery EasyUI 在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是 jQuery EasyUI jQuery EasyUI 是一

jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程中应用"框架"这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架--jQuery EasyUI. 那什么是jQuery EasyUI呢? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.然后就可以

jQuery EasyUI DataGrid Checkbox

转自:http://blog.csdn.net/baronyang/article/details/9323463 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked,另外就是两种 Checkbox 设定方式下如何取得有勾选的数据. 有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyU

jQuery EasyUI 教程

jQuery EasyUI 是一个基于 jQuery的javascript框架,集成了各种用户界面插件.jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点.本教程将告诉您如何使用 jQuery EasyUI 框架创建应用.现在开始学习 jQuery EasyUI!jQuery EasyUI 离线版CHM下载! jQuery EasyUI 教程目录 jQuery EasyUI 教程jQuery EasyUI 简介 jEasyUI 应用jEasyUI 创建 CRUD 应用j

jQuery EasyUI简介

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网

bootstrap在input框中加入icon图标

<form class="form-horizontal"> <div class="form-group has-feedback"> <div class="username"> <span class="fa fa-user-circle-o fa-2x form-control-feedback"></span> <input type="te

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

最近项目需要用到在页面进行批量操作,做了一些这方面的学习,参照网上的资料写了个小例子,记录一下: 准备 引入gson-2.6.2.jar,这里使用gson而不使用json-lib,原因是json-lib很老了,依赖的jar在后续与struts2整合时,会出现不兼容的警告.而gson很清爽. 引入jQuery EasyUI 1.4.4 文件结构: package com.tjd.study.easyui.entity; public class Bean { private String code

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

http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新