Custom Icons With JQuery Buttons

I use the JQuery UI to create and style buttons a lot. They have a really good icon set, however, I came into a situation where I was required to use custom icons provided to me for a project I was working on. Here is how I accomplished it.

Example HTML Button

There is nothing special here, just a simple button with some text and an ID to use as our selector.

<button id="myRefreshBtn" type="button">myRefreshButtonText</button>

Example CSS

The magic is really in the CSS. I create a custom class to use during the JQuery button initialization. The portion .custom-ui-icon-refresh can be changed to whatever you want to call the class. I want to also point out that I am using a 16×16 icon. I found that this works the best sense JQuery also uses 16×16 icons, although JQuery uses a sprite.

.ui-button .ui-icon.custom-ui-icon-refresh {
background-image: url("/my/icon/path/16x16/refresh.png");
}

Example JQuery code

When I initialize the JQuery button I just set the primary icon class to the custom class I referenced in the CSS.

$("#myRefreshBtn").button({
icons: {
primary: "custom-ui-icon-refresh"
}
});

Example finished product

Capture

I welcome any comments or suggestions.

Leave a comment

Your email address will not be published. Required fields are marked *


four − = 2