EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Alfred on February 11, 2020, 11:37:02 AM

Title: The best way to increase the icon size of easyui icon
Post by: Alfred on February 11, 2020, 11:37:02 AM

How do I increase the size the default icons which are 16×16 to something like 20×20? For example, if I increase the user icon png image to 20×20, the full image will not appear when I use it on iconCls="" such as below. How do I increase the button size to meet the size of the icon? Is there any CSS hack to achieve it?

Code:

<a href="#" iconCls="icon-user" class="easyui-linkbutton"></a>

Thanks,
Alfred

Title: Re: The best way to increase the icon size of easyui icon
Post by: jarry on February 11, 2020, 08:19:50 PM

Define these css styles to support the middle icon size.

Code:

<style type="text/css">
	.l-btn-middle .l-btn-text {
	  line-height: 36px;
	}
	.l-btn-middle .l-btn-icon {
	  width: 24px;
	  height: 24px;
	  line-height: 24px;
	  margin-top: -12px;
	}
	.l-btn-middle .l-btn-icon-left .l-btn-text {
	  margin-left: 36px;
	}
</style>

And then assign the 'size' to 'middle' for the linkbutton components.

Code:

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pic',size:'middle'">Add</a>