Asp.Net jQuery UI button change icons

In the posts jQuery UI Buttons with Icons & Asp.Net jQuery UI Buttons with Icons, we have seen on how to display icons to buttons using jQuery, here we shall see on how to change the icons displayed in the buttons.

The icons displayed in the buttons are configured using the icons property in jQuery as follows.

$('#cmdLogin').button(

{

    label: 'Login',

    icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' }

});

The icon specified in primary is displayed before the text and the icon specified in secondary is displayed after the text, in this case the icon displayed will be as follows.

Ok, what if we need to change the icon displayed, we can do so by changing the icon name, the list of available icons is mentioned in the jquery-ui-css file (jquery-ui-1.8.21.custom.css) Open this file, you can see a list of icons specified like

.ui-icon-***

Select the appropriate icon and change the property, we shall change it as follows.
icons: { primary: ui-icon-gear', secondary: ' ui-icon-star}, and here’s how the button will look now.

Related Post

Asp.net jQuery UI Simple Button Example

jQuery UI Buttons with Icons

Asp.Net jQuery UI Buttons with Icons

Asp.net jQuery button icons - Using a Proxy/Hidden Asp.net button

Asp.net jQuery button icons - Converting Submit types to Button types

Asp.Net jQuery UI Button icons not displaying

Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior

Asp.Net jQuery UI button change icons

ASP.NET jQueryUI Button: server side event not firing

Asp.net jQuery UI Style Radio Buttons

Asp.net jQuery UI Style Check Boxes

Asp.net jQuery UI Change Button Size / Button Text Font Size