easyUI替换非16x16的图标

我们知道easyUI原生的图标是比較难看的。所以要达到较好的用户体验,那么就很有必要替换它的图标。

原生的easyUI的图标:

可是。easyUI中的组件easyui-linkbutton默认仅仅提供了对16x16图片的良好支持。

假设你替换成别的尺寸的,那么图片就会被缩放,这显然不是我们想要的。

于是我们须要对easyui-linkbutton解析出的html进行改写。

1、把要更改的图标构造成css中的一个class。便于我们使用

.icon-add-3 {
	background: url(‘icons/add.png‘) no-repeat center center;
}

.icon-edit-3 {
	background: url(‘icons/modify.png‘) no-repeat center center;
}

.icon-delete-3 {
	background: url(‘icons/delete.png‘) no-repeat center center;
}

2、这三张图标的尺寸都是48x48的。假设不更改easyui-linkbutton的样式。那么出来的结果会很难看。

3、改动easyui-linkbutton的样式

能够看到默认的easyui-linkbutton解析出来的内容:

<a href="#" class="easyui-linkbutton l-btn l-btn-small l-btn-plain"
	iconcls="icon-add-3" plain="true">
	<span class="l-btn-left l-btn-icon-left">
		<span class="l-btn-text l-btn-empty"> </span>
		<span class="l-btn-icon icon-add-3"> </span>
	</span>
</a>

一、外面这层a有2个作用:①是用于处理背景色②是对a设置display:inline-block来定义a为块级元素并保证a水平排布

二、里面第一层span用来固定第二层span的位置,使用了display:inline-block和position:relative

三、第二层span.l-btn-text是用来撑开第一层的span,而且提供hover出现边框的效果

四、第二层span.l-btn-icon是用来显示图标的.

知道了这些之后,事实上我们须要改变的就是三和四。由于一和二都会被撑开而得到合适的显示。

4、可是事实上给里面的span元素直接加class是不现实的。由于这些元素的生成都是easyUI的js来控制的,所以我们仅仅能控制到a这层

(或者你能够直接对span.l-btn-textspan.l-btn-icon来设置样式。可是这样可能会影响到别的组件比方分页控件的图标)

所以,我这里是给外层的div做的控制。也就是a的父级的元素中。以下为參考代码:

.big-size-icon>a>span {
	line-height: 48px;
	padding-right: 10px;
	font-size: 24px;
	font-weight: bold;
}

.big-size-icon>a>span>span.l-btn-text {
	width: 48px;
	line-height: 48px;
}

.big-size-icon>a>span>span.l-btn-icon {
	width: 48px;
	height: 48px;
	line-height: 48px;
	top: 0;
	margin-top: 2px;
}

.big-size-icon>a[iconcls="icon-add-3"]>span:after {
	content: ‘新增‘;
	font-size: 28px;
	font-weight: bold;
}
.big-size-icon>a[iconcls="icon-edit-3"]>span:after {
	content: ‘改动‘;
	font-size: 28px;
	font-weight: bold;
}
.big-size-icon>a[iconcls="icon-delete-3"]>span:after {
	content: ‘删除‘;
	font-size: 28px;
	font-weight: bold;
}

最后放张实现的效果:

时间: 2024-10-03 01:54:25

easyUI替换非16x16的图标的相关文章

在Axure中使用FontAwesome替换你的网站图标[axure小技巧]

你是不是还在为你的网站做一个很小的图标而忙碌着?你是不是还在为找一个图标导出百度或者谷歌?你有没有想过可以用字体来做一个图标代替普通的图片图标?这两天给公司做案例,由于自己又对设计不熟悉,寻找图标的苦差可不是很好做.同事分享了一个用字体代替图片做网站图标的资源,在此非常感谢!Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作.丢掉图片图标吧,跟我一起来用Font Awesome. 使用方法: 1. 下载 Font Awesome 官方网站

替换应用程序exe图标,主要使用BeginUpdateResource,UpdateResource API函数

替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程序原来的图标. [cpp] view plain copy // 第一个参数是将要替换图标的exe文件路径,第二个参数是替换的ico文件路径 void ReplaceExeIco(LPCTSTR lpszApp, LPCTSTR lpszIco) { try { CFile file(lpszIco

使用Font Awesome替换你的网站图标

http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作.丢掉图片图标吧,跟我一起来用Font Awesome. Font Awesome 特性: 1.一个字体文件, 249 个图标. 2.用CSS控制样式. 3.无限缩放. 4.个人.商业均可自由使用. 5.支持IE7+. 6.在Retina屏

php正则替换非站内链接 替换zencart描述内的非本站链接

php正则替换非站内链接 <?php //要替换的文本,比如产品描述中的文字 header("content-Type: text/html; charset=utf-8"); $content = ' <li><a href="http://afish.cnblogs.com" target="_blank">小鱼阁</a></li> <li><a href="h

替换 ionic 中的 图标

第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀,文件的名称 第三步,修改每个图标的名称,size值然后点击下载 我做的是安卓的APP所以修改的名字也是按照我自己的来的,你们也按照你们自己的来 第四步,下载下来的文件名字为icomoon压缩包,解压后应该是这样 第五步重点来了,要注意呀,在你的项目里面找到fonts,把你下载下来的fonts文件覆

使用Font Awesome替换你的网站图标(icons 图标)

http://www.thinkcmf.com/font/icons/ 第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后拷贝到你的项目中再引入到你的文件里面 如下: ? 1 <link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/

使用icon替换你的网页图标(转)

第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后拷贝到你的项目中再引入到你的文件里面 如下: <link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/css/font-awesome.css" /> 3: 开始使用

如何将网页的title前面的图标替换成自己的图标

首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 http://www.bitbug.net/   生成的图标背景是图片的背景,图片如果为透明背景,那么生成的ico图标也是透明的 例如:<link rel="shortcut icon" href="/favicon.ico"/>

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