EasyUI replaces non-16 icons

EasyUI replaces non-16 icons

We know that the native icons of easyUI are ugly. Therefore, to achieve a better user experience, it is very necessary to replace its icon.

Native easyUI icons:

However, the easyUI-linkbutton component in easyui only provides good support for 16x16 images by default.

If you replace it with another size, the image will be scaled, which is obviously not what we want.

Therefore, we need to rewrite the html parsed by easyui-linkbutton.

1. Construct the icon to be changed into a class in css for our convenience.

.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. The three icons are 48x48 in size. If you do not change the easyui-linkbutton style, the results will be very ugly.

3. Modify the easyui-linkbutton style.

You can see the content parsed by the default easyui-linkbutton:

I. The Layer a has two functions: ① is used to process the background color. ② It is used to set display: inline-block for a to define a as a block-level element and ensure horizontal layout of.

2. the first layer of span is used to fix the position of the second layer of span. display: inline-block and position: relative are used.

3. span. l-btn-text on the second layer is used to open the span on the first layer and provide the hover border effect.

4. The second layer span. l-btn-icon is used to display the icon.

After knowing this, we actually need to change three and four, because one and two will be pushed out for proper display.

4. But in fact, it is unrealistic to add class directly to the span element, because the generation of these elements is controlled by the js of easyUI, so we can only control the layer.

(Or you can set the style directly on the span. l-btn-textspan.l-btn-icon, but this may affect other components, such as the icons of the paging Control)

Therefore, I am here to control the outer div, that is, the parent element of a. The following is the reference code:

. Big-size-icon> a> span {line-height: 48px; padding-right: 10px; font-size: 24px; font-weight: bold ;}. big-size-icon> a> span. l-btn-text {width: 48px; line-height: 48px ;}. big-size-icon> a> 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: 'add'; font-size: 28px; font-weight: bold ;}. big-size-icon> a [iconcls = "icon-edit-3"]> span: after {content: 'modify'; font-size: 28px; font-weight: bold ;}. big-size-icon> a [iconcls = "icon-delete-3"]> span: after {content: 'delete'; font-size: 28px; font-weight: bold ;}

The following figure shows the effect: